Pernahkah Anda bertanya-tanya, jika Anda mengklik sebuah tombol di dalam sebuah div, apakah Anda sebenarnya mengklik tombolnya saja atau mengklik div-nya juga?
Di dalam JavaScript, ketika sebuah event terjadi pada elemen yang bersarang (nested), event tersebut tidak hanya berhenti di satu elemen. Proses ini dikenal sebagai Event Flow, yang terdiri dari dua fase utama: Capturing dan Bubbling.
1. Event Bubbling (Fase Gelembung)
Event Bubbling adalah perilaku default di hampir semua browser. Bayangkan gelembung udara di dalam air yang naik dari dasar ke permukaan.
-
Proses: Event dimulai dari elemen yang paling dalam (target) dan merambat naik ke elemen-elemen induknya hingga mencapai objek
documentatauwindow. -
Contoh: Jika Anda mengklik
<button>, maka eventclickakan memicu handler di<button>, kemudian naik ke<div>, lalu ke<body>.
2. Event Capturing (Fase Menangkap)
Event Capturing adalah kebalikan dari Bubbling.
-
Proses: Event dimulai dari elemen paling luar (
window/document) dan turun ke bawah hingga mencapai elemen target. -
Cara Mengaktifkan: Secara default,
addEventListenerdiset untuk fase Bubbling. Untuk menggunakan Capturing, Anda harus menambahkan argumen ketiga{ capture: true }.
element.addEventListener('click', handler, true); // True berarti menggunakan Capturing
3. Menghalangi Rambatan: e.stopPropagation()
Terkadang, perambatan event ini justru mengganggu. Misalnya, Anda punya tombol "Hapus" di dalam sebuah kartu (card) yang bisa diklik. Anda tidak ingin saat tombol "Hapus" diklik, fungsi klik pada kartunya juga ikut berjalan.
Di sinilah kita menggunakan e.stopPropagation(). Metode ini akan menghentikan event agar tidak merambat lebih jauh lagi (baik naik ke atas maupun turun ke bawah).
Contoh Kasus Praktis:
const kartu = document.querySelector('.card');
const tombolHapus = document.querySelector('.btn-delete'); kartu.addEventListener('click', () => { console.log("Kartu diklik (Membuka detail)");
}); tombolHapus.addEventListener('click', (e) => { // Menghentikan agar klik tidak merambat ke elemen '.card' e.stopPropagation(); console.log("Tombol hapus diklik (Menghapus data)");
});
Tanpa stopPropagation(), saat Anda klik tombol hapus, konsol akan mencetak dua pesan sekaligus. Dengan stopPropagation(), hanya pesan hapus yang muncul.
4. Perbedaan stopPropagation() vs preventDefault()
Banyak pemula yang tertukar antara dua fungsi ini. Mari kita luruskan:
| Fungsi | Kegunaan | Contoh |
e.stopPropagation() |
Menghentikan perambatan event ke induk/anak. | Mencegah klik tombol memicu klik pada div pembungkusnya. |
e.preventDefault() |
Menghentikan aksi bawaan browser. | Mencegah link <a> berpindah halaman atau form me-refresh page. |
Ringkasan
-
Bubbling: Event naik dari dalam ke luar (Default).
-
Capturing: Event turun dari luar ke dalam.
-
stopPropagation(): Digunakan untuk "mengisolasi" event agar tidak memicu listener pada elemen induk/pembungkusnya.
Memahami konsep ini sangat penting saat Anda membangun antarmuka yang kompleks dengan banyak elemen yang saling tumpang tindih agar interaksi aplikasi Anda tidak "bocor" ke elemen lain.
