JavaScript Extended #21: Event Bubbling, Capturing, dan Delegation

1. Event Flow dalam JavaScript

Saat sebuah event terjadi, JavaScript memiliki alur propagasi event yang disebut event flow. Secara umum ada tiga tahap:

  • Capturing phase
  • Target phase
  • Bubbling phase

2. Event Bubbling

Event bubbling adalah kondisi ketika event yang terjadi pada child element akan naik ke parent element.

document.querySelector("button").addEventListener("click", () => {
  console.log("Button clicked");
});

document.querySelector(".card").addEventListener("click", () => {
  console.log("Card clicked");
});

Jika tombol ada di dalam .card, maka klik pada tombol bisa memicu event di tombol lalu naik ke parent.

3. Event Capturing

Secara default, event lebih sering dipakai dalam mode bubbling. Namun kita juga bisa menangkap event lebih awal dengan mode capturing.

document.querySelector(".card").addEventListener("click", () => {
  console.log("Card capturing");
}, true);

Parameter true menunjukkan bahwa listener bekerja pada fase capturing.

4. stopPropagation()

Jika kita ingin menghentikan event agar tidak terus naik ke parent, gunakan stopPropagation().

button.addEventListener("click", (event) => {
  event.stopPropagation();
  console.log("Klik hanya di button");
});

5. Event Delegation

Event delegation adalah teknik menaruh event listener di parent untuk menangani banyak child. Teknik ini sangat berguna jika elemen child banyak atau dibuat secara dinamis.

document.querySelector("ul").addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log("Item diklik:", event.target.textContent);
  }
});

6. Kelebihan Event Delegation

  • Lebih hemat memory
  • Tidak perlu menambahkan listener ke setiap child
  • Tetap bekerja meskipun child ditambahkan secara dinamis

7. Ringkasan

  • Bubbling: event naik dari child ke parent
  • Capturing: event turun dari parent ke child
  • Delegation: event ditaruh di parent untuk mengelola banyak child
  • stopPropagation() dapat menghentikan alur event

Di part berikutnya, kita akan membahas LocalStorage dan SessionStorage.