A. Event Javascript
Events dalam JavaScript merupakan interaksi antara pengguna dan sistem atau kejadian yang terjadi dalam browser yang dipantau oleh JavaScript, seperti klik mouse, penekanan tombol keyboard, perubahan halaman web, atau keluar dari halaman web.
Dapat juga dikatakan bahwa Event adalah kejadian yang terjadi di halaman web, Misalnya seperti:
- User melakukan scroll;
- User melakukan klik pada elemen tertentu;
- Halaman web di-load;
- Form di-submit;
- dan sebagainya.
Jenis events yang paling sering digunakan:
a. Mouse Events, Mouse events dipicu oleh aksi pengguna menggunakan mouse, seperti:
- mouseleave: Ketika kursor mouse meninggalkan elemen
- click: Ketika pengguna mengklik elemen
- dblclick: Ketika pengguna mengklik dua kali pada elemen
- mouseenter: Ketika kursor mouse masuk ke dalam elemen
b. Keyboard Events, Keyboard events dipicu oleh aksi pengguna menggunakan keyboard, seperti:
- keypress: Ketika pengguna menekan dan melepas tombol keyboard
- keydown: Ketika pengguna menekan tombol keyboard
- keyup: Ketika pengguna melepas tombol keyboard
c. Event lainnya : form events, window events, dan lain sebagainya.
B. Menggunakan Event Javascript
- Cara Pertama: Menggunakan Atribut
HTML memiliki atribut event untuk menentukan fungsi yang akan dijalankan saat event terjadi.
<button onclick="myFunction()">Click me</button>
onclick
adalah atribut HTML untuk menentukan aksi saat event klik pada sebuah elemen. Atribut ini bisa diisi dengan nama fungsi atau ekspresi javascript.
Selain event onclick
ada juga event lainnya seperti onchange
, onmouseover
, onkeyup
, onload
, dll.
- Cara kedua: menggunakan Method addEventListener()
MethodaddEventListerner()
merupakan method yang terdapat pada object DOM. Object ini mewakili sebuah elemen HTML di Javascript.
button.addEventListener('click', function(e){
});
Penulisan nama event ditulis tanpa menggunakan on
. Misalnya kita ingin meng-handle event klik, maka cukup tulis click
saja
C. Contoh Menggunakan Handle Event di Javascript
- Event Klik, Event klik termasuk dalam Mouse Event, karena pemicunya adalah aktivitas klik dari mouse, dapat diberikan aksi tertentu saat terjadi klik, misalnya menampilkan dialog
alert()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Event Klik</title>
</head>
<body>
<button onclick="hello()">Hello</button>
<button id="hello-petanikode">Hello Petani Kode</button>
<script>
function hello(){
alert("Hello World");
}
const btnLogin = document.getElementById("hello-petanikode");
btnLogin.addEventListener("click", function(){
alert("Hello Petani Kode");
});
</script>
</body>
</html>
event dblclick
untuk double klik.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Event Klik</title>
</head>
<body>
<button id="btn-double">Klik 2x</button>
<script>
const btnLogin = document.getElementById("btn-double");
btnLogin.addEventListener("dblclick", function(){
alert("Terima kasih, kamu sudah klik 2x");
});
</script>
</body>
</html>
- Event Mouse, Selain diklik, berikut ini event yang bisa terjadi karena mouse:
mouseover
(hover) saat pointer berada di atas element;mouseenter
saat pointer mendekat pada elemen;mouseout
saat pointer menjauh dari elemen;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Event Mouse</title>
</head>
<body>
<button id="btn-enter">Mouse Enter</button>
<button id="btn-hover">Hover</button>
<button id="btn-out">Mouse Out</button>
<script>
const btnEnter = document.getElementById("btn-enter");
const btnHover = document.getElementById("btn-hover");
const btnOut = document.getElementById("btn-out");
btnEnter.addEventListener("mouseenter", function(event) {
event.target.innerText = "Mouse sudah masuk";
});
btnOut.addEventListener("mouseout", function(event) {
event.target.innerText = "Mouse sudah keluar";
});
btnHover.addEventListener("mouseover", function(event){
event.target.innerText = "Mouse sudah di atas elemen";
});
</script>
</body>
</html>
- Event Keyboard, beberapa event yang bisa terjadi saat kita menekan keyboard:
keypress
: kejadian saat kita menekan dan menahan tombol tertentu;keyup
: kejadian saat kita berhenti menekan (melepas) tombol tertentu;keydown
: kejadian saat kita mulai menekan tombol tertentu;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Event Key</title>
</head>
<body>
<h1 id="keydown"></h1>
<h1 id="pressed"></h1>
<h1 id="keyup"></h1>
<script>
const keydown = document.getElementById("keydown");
const pressed = document.getElementById("pressed");
const keyup = document.getElementById("keyup");
document.addEventListener("keydown", function (event) {
keydown.innerText = `menekan: ${event.key}`;
});
document.addEventListener("keypress", function (event) {
pressed.innerText = `menahan: ${event.key}`;
});
document.addEventListener("keyup", function (event) {
keyup.innerText = `melepas: ${event.key}`;
});
</script>
</body>
</html>
- Event Change, Event change biasanya terjadi pada elemen input seperti input text, radio, checkbox, select-option, dll. Event change akan terjadi saat nilai pada elemen tersebut berubah.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Event on Change</title>
</head>
<body>
<div id="info"></div>
<label for="buah">Pilih Buah</label>
<select name="buah" id="buah">
<option>Apel</option>
<option>Mangga</option>
<option>Jeruk</option>
</select>
<script>
const buah = document.getElementById('buah');
const info = document.getElementById('info');
buah.addEventListener('change', function(e){
info.innerText = `Anda memilih: ${e.target.value}`;
});
</script>
</body>
</html>
- Event pada Form, beberapa event yang biasanya terjadi pada form:
submit
: saat kita melakukan submit atau mengirim data pada form;reset
: saat kita melakukan clear data pada form;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latihan Form Event</title>
</head>
<body>
<form action="" method="post" id="form-login">
<fieldset>
<legend>Login</legend>
<div>
<label for="username">username</label>
<input type="text" name="username" placeholder="username" />
</div>
<div>
<label for="password">password</label>
<input type="password" name="password" placeholder="password" />
</div>
<div>
<p id="feedback"></p>
<button type="submit">Login</button>
<button type="reset">Celar</button>
</div>
</fieldset>
</form>
<script>
const formLogin = document.getElementById("form-login");
const feedbackMessage = document.getElementById("feedback");
// mendengarkan event submit pada form
formLogin.addEventListener("submit", function(event){
event.preventDefault();
const data = new FormData(event.target);
feedbackMessage.innerHTML = `Login dengan username <code>${data.get("username")}</code> dikirim!`;
});
// mendengarkan event reset pada form
formLogin.addEventListener("reset", function(){
feedbackMessage.textContent = "Form dibersihkan!";
});
</script>
</body>
</html>
untuk mengambil data dari object pengirim event, yakni formLogin
.
formLogin.addEventListener("submit", function(event){
event.preventDefault();
const data = new FormData(event.target);
feedbackMessage.innerHTML = `Login dengan username <code>${data.get("username")}</code> dikirim!`;
});
Leave a Reply