Event Handling dalam JavaScript

Event handling adalah mekanisme dalam JavaScript untuk menangani interaksi pengguna dengan elemen di halaman web. Event bisa berupa klik, hover, input teks, scroll, dan banyak lainnya.

1. Menambahkan Event Listener

Cara utama menangani event adalah dengan menggunakan addEventListener().

Contoh:

document.getElementById("btn").addEventListener("click", function() {
    alert("Tombol diklik!");
});

Pada contoh ini, ketika tombol dengan ID btn diklik, akan muncul alert.

2. Jenis-Jenis Event

Beberapa event yang sering digunakan:

• Mouse events: click, dblclick, mouseenter, mouseleave
• Keyboard events: keydown, keyup, keypress
• Form events: submit, change, focus, blur
• Window events: load, resize, scroll

3. Menghapus Event Listener

Gunakan removeEventListener() jika ingin menghapus event listener.

Contoh:

function showMessage() {
    alert("Event akan dihapus setelah satu kali klik!");
    document.getElementById("btn").removeEventListener("click", showMessage);
}

document.getElementById("btn").addEventListener("click", showMessage);

Pada contoh ini, event hanya berjalan sekali, lalu dihapus.

4. Event Bubbling dan Capturing

JavaScript memiliki dua mekanisme propagasi event:

• Bubbling: Event dimulai dari elemen yang diklik dan naik ke elemen induk.
• Capturing: Event dimulai dari elemen paling luar dan turun ke elemen yang diklik.

Gunakan parameter true dalam addEventListener() untuk capturing.

document.getElementById("parent").addEventListener("click", function() {
    alert("Parent diklik!");
}, true);

Dengan true, event akan dieksekusi pada elemen parent sebelum elemen anaknya.

5. Mencegah Perilaku Default

Gunakan preventDefault() untuk mencegah perilaku bawaan elemen, misalnya mencegah form dikirim saat tombol submit ditekan.

Contoh:

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();
    alert("Form tidak dikirim!");
});

Kode ini mencegah form dikirim dan hanya menampilkan alert.

Event handling sangat penting untuk membuat halaman web interaktif dan responsif terhadap tindakan pengguna.