JavaScript Events
Apa Itu Event?
Bayangkan kamu punya bel rumah.
- Ketika seseorang menekan tombol bel : itu adalah Event
- Bunyi "ting tong" yang terjadi : itu adalah Response / Handler
- Kabel yang menghubungkan tombol ke bel : itu adalah Event Listener
Artinya:
Event = sesuatu yang terjadi
Listener = yang mendengarkan kejadian itu
Handler = aksi yang dilakukan saat kejadian terjadi
Di JavaScript, "kejadian" itu bisa berupa:
- Klik mouse
- Tekan keyboard
- Scroll halaman
- Submit form
- Hover mouse
- Resize window
- dan banyak lagi
JavaScript memungkinkan kita menunggu kejadian, lalu menjalankan kode saat kejadian itu terjadi.
Cara Handle Event
Ada beberapa cara menangani event di JavaScript, tapi cara yang best practice menggunakan addEventListener():
Contoh :
element.addEventListener("event", function);button.addEventListener("click", function() {
console.log("Button diklik!");
});Jenis-Jenis Event yang Paling Sering Digunakan
1. Mouse Events
click
dblclick
mousedown
mouseup
mouseover
mouseout
mousemove
mouseenter
mouseleave2. Keyboard Events
keydown
keyup
keypress (deprecated)3. Form Events
submit
change
input
focus
blur
reset4. Window / Document Events
load
resize
scroll
DOMContentLoaded5. Clipboard Events
copy
cut
pasteContoh
Contoh 1 : Klik Tombol Mengubah Warna
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="btn">Ubah Warna</button>
<div id="box" style="width:200px;height:200px;background:lightblue;margin-top:20px;">
</div>
<script src="script.js"></script>
</body>
</html>JavaScript
// Ambil elemen tombol
const button = document.getElementById("btn");
// Ambil elemen box
const box = document.getElementById("box");
// Tambahkan event listener klik
button.addEventListener("click", function() {
// Mengubah warna background saat tombol diklik
box.style.backgroundColor = "tomato";
});Yang Terjadi
- User klik tombol
- Event "click" terjadi
- JavaScript menjalankan function
- Warna box berubah
Contoh 2 : Menggunakan Event Object
Event Object berisi informasi tentang event yang terjadi
Contoh: ambil input keyboard
HTML
<input type="text" id="input" placeholder="Ketik sesuatu..." />
<p id="output"></p>JavaScript
// Ambil input
const input = document.getElementById("input");
// Ambil output
const output = document.getElementById("output");
// Event saat user mengetik
input.addEventListener("keyup", function(event) {
// event.target = elemen yang memicu event
const text = event.target.value;
// Tampilkan hasil ketikan
output.textContent = text;
});Event Object yang Sering Dipakai
event.target // elemen yang memicu event
event.type // jenis event
event.key // tombol keyboard ditekan
event.clientX // posisi mouse X
event.clientY // posisi mouse Y
event.preventDefault() // menghentikan default behaviour
event.stopPropagation() // menghentikan bubblingEvent Bubbling & Capturing
Bayangkan struktur HTML:
<div id="parent">
<button id="child">Klik</button>
</div>Saat tombol diklik:
Event akan mengalir seperti ini:
button → div → body → documentIni disebut Event Bubbling (naik ke atas)
Artinya:
Klik tombol bisa memicu event di parent juga.
Contoh Bubbling
parent.addEventListener("click", function() {
console.log("Parent diklik");
});
child.addEventListener("click", function() {
console.log("Child diklik");
});Hasil saat klik tombol:
Child diklik
Parent diklikMenghentikan Bubbling
Gunakan:
event.stopPropagation()Contoh:
child.addEventListener("click", function(event) {
event.stopPropagation(); // menghentikan bubbling
console.log("Child saja");
});Sekarang parent tidak akan ikut ter-trigger.