Event object dan delegation

target, preventDefault, stopPropagation, event delegation.

Pahami konsepnya

Event object (biasanya bernama e atau event) membawa detail kejadian: e.target adalah elemen yang MEMICU event (bukan elemen yang mendaftar), e.currentTarget adalah elemen yang mendaftar. e.type memberi nama event. e.preventDefault() mencegah aksi bawaan — form tidak submit, link tidak pindah halaman.

e.stopPropagation() mencegah event menggelembung (bubble) ke elemen induk. Tanpanya, klik pada tombol di dalam form juga memicu event click pada form itu sendiri (event bubbling).

Event delegation memanfaatkan bubbling: pasang listener di INDUK untuk menangani semua anak. ul.addEventListener("click", e => { if (e.target.tagName === "LI") ... }) — satu listener untuk semua li, termasuk yang ditambahkan nanti. Ini pola yang lebih efisien daripada listener per elemen.

Coba contoh kode

<!doctype html>
<html>
<body>
  <ul id="menu">
    <li>Beranda</li>
    <li>Tentang</li>
    <li>Kontak</li>
  </ul>

  <script>
    // delegation: satu listener untuk semua li
    const menu = document.getElementById("menu");

    menu.addEventListener("click", (e) => {
      if (e.target.tagName === "LI") {
        console.log(`Klik: ${e.target.textContent}`);
        e.target.classList.toggle("aktif");
      }
    });

    // tambah li baru — delegation otomatis menangani
    const li = document.createElement("li");
    li.textContent = "Bantuan";
    menu.appendChild(li);
  </script>
</body>
</html>

Satu listener di UL menangani klik SEMUA li — termasuk "Bantuan" yang ditambahkan SETELAH listener terpasang. Ini kekuatan delegation: tidak perlu listener per elemen.

Latihan singkat

Uji: delegation — klik li menampilkan textContent-nya; gunakan e.target.