← JavaScript31 / 69

Event delegation

Kalau daftarmu punya 100 tombol, memasang 100 listener itu pemborosan — dan tombol yang ditambahkan setelah listener dipasang tidak akan berfungsi. Solusinya: pasang satu listener di parent, lalu periksa event.target untuk tahu elemen mana yang diklik. Ini pertanyaan interview yang sering muncul.

👀 Contoh dulu

const tabel = document.querySelector('table');

// SATU listener untuk semua baris, termasuk yang ditambah nanti
tabel.addEventListener('click', (e) => {
  if (e.target.tagName === 'TD') {
    console.log('Sel diklik: ' + e.target.textContent);
  }
});

Hasilnya: Mengklik sel mana pun menampilkan isinya, tanpa perlu listener per sel.

💡 e.target = elemen yang benar-benar diklik. Periksa dulu jenisnya, karena klik bisa mendarat di elemen lain.

📝 Sekarang giliranmu

Pasang satu listener click di #daftar, lalu di dalamnya periksa e.target dan tampilkan e.target.textContent.

Preview
← SebelumnyaBerikutnya →