Menambahkan Event Click pada Elemen yang Dibuat Secara Dinamis dengan JavaScript
Dalam pengembangan web, sering kali kita perlu menambahkan event listener pada elemen HTML yang dibuat secara dinamis menggunakan JavaScript. Artikel ini akan membahas cara menambahkan event click pada elemen yang dibuat secara dinamis.
1. Menambahkan Event Listener saat Membuat Elemen
Cara pertama adalah menambahkan event listener saat elemen dibuat. Metode ini lebih efisien karena event listener hanya ditambahkan sekali.
Berikut contohnya:
const myButton = document.createElement("button");
myButton.textContent = "Klik Saya!";
// Menambahkan event click pada button
myButton.addEventListener("click", function() {
alert("Tombol di klik!");
});
// Menambahkan button ke dalam DOM
document.body.appendChild(myButton);
Dalam contoh di atas, kita membuat sebuah tombol (<button>) dan menambahkan event listener click padanya. Saat tombol di klik, sebuah alert akan ditampilkan.
2. Menambahkan Event Listener dengan Event Delegation
Cara kedua adalah dengan menggunakan event delegation. Metode ini lebih efektif jika terdapat banyak elemen dengan event click yang sama.
Berikut contohnya:
// Mengambil elemen induk
const container = document.getElementById("myContainer");
// Menambahkan event listener pada container
container.addEventListener("click", function(event) {
// Mengecek apakah elemen yang diklik adalah button
if (event.target.tagName === "BUTTON") {
alert("Tombol di klik!");
}
});
// Membuat 3 tombol secara dinamis
for (let i = 0; i < 3; i++) {
const button = document.createElement("button");
button.textContent = "Tombol " + (i + 1);
container.appendChild(button);
}
Dalam contoh ini, kita menambahkan event listener pada elemen induk (myContainer). Saat elemen di dalam container di klik, kode akan memeriksa apakah elemen yang diklik adalah tombol. Jika ya, maka alert akan ditampilkan.
Keuntungan Event Delegation
- Efisiensi: Event listener hanya ditambahkan sekali pada elemen induk, bukan pada setiap elemen anak.
- Mudah Diatur: Mudah untuk menambahkan atau menghapus event listener pada elemen induk.
Kesimpulan
Menambahkan event click pada elemen yang dibuat secara dinamis bisa dilakukan dengan dua cara: menambahkan event listener saat membuat elemen dan menggunakan event delegation. Pilihlah metode yang sesuai dengan kebutuhan proyek Anda.