Langsung Bisa Diklik: Cara Menambah Event ke Element yang Dibuat Javascript

Ditulis oleh JavaScript

Buat elemen dulu dengan document.createElement(), pasang addEventListener() ke variabel elemen itu, lalu tempel ke DOM dengan appendChild(). Itu langkah yang paling sering terlewat. Banyak kode memasang listener ke querySelector padahal elemen dinamisnya belum dirender.

Pasang Event Langsung Setelah createElement

Urutan yang benar menentukan apakah klik jalan atau tidak. Pegang referensi elemennya, jangan cari ulang.

1. Buat elemen dengan document.createElement("button").
2. Isi teks atau atributnya, misalnya textContent.
3. Pasang event dengan button.addEventListener("click", ...).
4. Tempel ke parent yang sudah ada, misalnya document.body.appendChild(button).

const btn = document.createElement("button");
btn.textContent = "Hapus";
btn.addEventListener("click", () => {
  btn.remove();
});
document.body.appendChild(btn);

Kesalahan umum: memanggil document.querySelector(".btn-hapus") sebelum appendChild. Hasilnya null karena elemen memang belum ada di DOM.

Tabel Pilihan Metode untuk Elemen Dinamis

Metode Cocok Untuk Catatan
addEventListener langsung Satu elemen baru Simpel, mudah dihapus
Event delegation List, tabel, hasil fetch Satu listener di parent
onclick Demo cepat Tertimpa bila dipasang dua kali

BACA JUGA:

Pakai Event Delegation untuk Banyak Elemen

Delegation memasang satu listener di parent statis, lalu membaca elemen mana yang diklik. Cocok saat elemen dibuat dalam loop atau dirender ulang.

  • Parent harus sudah ada sejak awal, misalnya ul atau tbody.
  • Gunakan e.target.closest("button") agar klik pada ikon di dalam tombol tetap terbaca.
  • Cukup satu addEventListener, tidak perlu loop pasang listener.
const list = document.getElementById("list");
list.addEventListener("click", (e) => {
  const btn = e.target.closest(".hapus");
  if (!btn) return;
  btn.closest("li").remove();
});

Pakai pola ini saat render daftar dari fetch(), tambah baris tabel dinamis, atau me-render ulang dengan innerHTML. Listener lama hilang saat innerHTML diganti, listener delegation tetap hidup.

FAQ

Kenapa event tidak jalan padahal elemen muncul?

Listener dipasang ke selector yang kosong atau dipasang ulang setelah render. Pasang ke referensi elemen atau pindah ke delegation.

Apakah harus delegation untuk satu tombol saja?

Tidak. Satu tombol cukup pakai addEventListener langsung setelah createElement.

Bagaimana hapus event dari elemen dinamis?

Simpan fungsi handler dalam variabel lalu panggil removeEventListener, atau hapus elemennya sekalian.

Artikel Terkait