Sebuah daftar mungkin berisi banyak kontrol berulang, dan baris baru dapat ditambahkan setelah halaman dimuat. Daripada melampirkan pendengar ke setiap tombol, dengarkan induk bersama dan identifikasi kontrol yang diaktifkan.

list.addEventListener("click", (event) => {
  if (!(event.target instanceof Element)) return;
  const button = event.target.closest("button[data-action]");
  if (!button || !list.contains(button)) return;
  handleAction(button.dataset.action, button.dataset.id);
});

Jaga agar pemeriksaan target tetap spesifik

  • Gunakan yang terdekat sehingga klik pada ikon di dalam tombol masih mencapai tombol itu.
  • Konfirmasikan kecocokan tersebut termasuk dalam daftar yang dimaksud sebelum bertindak.
  • Simpan data tindakan pada kontrol yang memiliki tindakan tersebut.

Jangan mendelegasikan semuanya

Pendengar langsung lebih sederhana untuk sekumpulan kontrol kecil dan stabil atau ketika setiap item memerlukan pengaturan berbeda. Delegasi paling berguna ketika item diulang atau dibuat secara dinamis.

Uji klik pada konten bersarang, aktivasi keyboard, dan kontrol di luar daftar. Pengendali kejadian harus merespons tindakan yang dimaksudkan satu kali dan mengabaikan klik yang tidak terkait.