Solusi Tepat Cara Menangani Event pada Element Dinamis Javascript

Ditulis oleh JavaScript

Cara menangani event pada element dinamis JavaScript yang benar adalah memakai delegasi event. Kamu pasang satu addEventListener di parent yang statis, lalu deteksi elemen yang diklik lewat event.target. Listener langsung gagal karena node baru hasil render tidak membawa listener lama.

Kenapa addEventListener Langsung Gagal di Elemen Baru

Browser menempelkan listener ke node tertentu, bukan ke selector. Setiap innerHTML atau appendChild membuat node baru yang tidak punya listener tersebut.

  • Query dijalankan sebelum elemen muncul di DOM.
  • Render ulang menghapus node lama beserta listenernya.
  • Kode hanya memilih elemen pertama, bukan semua item baru.

Cek cepat sebelum memperbaiki:

1. Pastikan skrip jalan setelah DOM siap atau taruh sebelum penutup body.
2. Hitung dengan document.querySelectorAll('.btn-hapus').length apakah elemen sudah ada saat listener dipasang.
3. Cek apakah list dirender ulang setiap ada data baru.

Pola Delegasi Event yang Benar di Browser

Pasang listener sekali di ul, div, atau document yang tidak ikut dihapus saat render. Klik dari tombol anak akan naik ke parent melalui event bubbling.

const list = document.querySelector('#daftar');

list.addEventListener('click', (event) => {
  const tombol = event.target.closest('.btn-hapus');
  if (!tombol) return;
  tombol.closest('li').remove();
});

Kode di atas memakai closest('.btn-hapus') supaya klik pada ikon di dalam tombol tetap terbaca. Pengecekan if (!tombol) return mencegah klik area kosong ikut memicu hapus. Pola ini tetap bekerja walau item ditambah belakangan lewat JavaScript.

BACA JUGA:

Perbandingan Metode Pasang Event

Metode Cocok Untuk Catatan
Listener langsung Tombol statis Simpel, tapi hilang saat render ulang
Delegasi List, tabel, tombol dinamis Satu listener, hemat memori
Pasang ulang setelah render Komponen kecil tanpa parent tetap Mudah duplikat bila render sering
  • Pakai delegasi untuk tombol hapus, edit, checkbox massal, dan pagination hasil fetch.
  • Listener langsung cukup untuk tombol simpan, menu navigasi, dan modal yang tidak dirender ulang.
  • Bangun teks item dengan textContent atau createElement. Pakai innerHTML hanya untuk data tepercaya karena data pengguna bisa menyisipkan script.

FAQ

Apakah harus pasang ulang listener setiap render?

Tidak, bila memakai delegasi karena parent statis tetap memegang satu listener.

Kapan memakai closest dibanding target langsung?

Pakai closest bila tombol berisi ikon atau span agar klik anak tetap terdeteksi.

Apakah delegasi cocok untuk input dan change?

Cocok, pasang change atau input di form parent lalu filter lewat event.target.matches.

Artikel Terkait