Add Click Event To Dynamically Created Button Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

56

Share

Menambahkan Event Click ke Tombol yang Dibuat Secara Dinamis di JavaScript

Dalam pengembangan web, seringkali kita perlu membuat elemen HTML secara dinamis menggunakan JavaScript. Salah satu elemen yang umum dibuat secara dinamis adalah tombol. Untuk membuat tombol ini berfungsi dengan baik, kita perlu menambahkan event listener, seperti event click. Artikel ini akan membahas bagaimana cara menambahkan event click ke tombol yang dibuat secara dinamis di JavaScript.

Metode 1: Menggunakan addEventListener()

Metode ini adalah cara yang paling umum dan direkomendasikan untuk menambahkan event listener ke elemen HTML. Berikut adalah langkah-langkahnya:

1. Buat tombol secara dinamis:

   const button = document.createElement('button');
   button.textContent = 'Klik Saya!';
   

2. Tambahkan event listener:

   button.addEventListener('click', function() {
       // Kode yang akan dieksekusi saat tombol diklik
       console.log('Tombol diklik!');
   });
   

3. Tambahkan tombol ke DOM:

   document.body.appendChild(button);
   

Metode 2: Menggunakan Atribut onclick

Metode ini kurang direkomendasikan dibandingkan dengan addEventListener(), karena lebih sulit untuk menghapus event listener dan dapat menyebabkan konflik jika ada event listener lain yang terikat pada tombol yang sama.

1. Buat tombol secara dinamis:

   const button = document.createElement('button');
   button.textContent = 'Klik Saya!';
   

2. Tambahkan atribut onclick:

   button.onclick = function() {
       // Kode yang akan dieksekusi saat tombol diklik
       console.log('Tombol diklik!');
   };
   

3. Tambahkan tombol ke DOM:

   document.body.appendChild(button);
   

Mengapa addEventListener() Lebih Baik?

• Lebih fleksibel: Anda dapat menambahkan beberapa event listener ke elemen yang sama.
• Lebih mudah untuk menghapus event listener: Anda dapat menggunakan removeEventListener() untuk menghapus event listener tertentu.
• Lebih mudah untuk mengelola event listener: Anda dapat menggunakan event.stopPropagation() untuk mencegah event dipropagasikan ke elemen induk.

Contoh Lengkap

Berikut adalah contoh lengkap yang menggabungkan kedua metode:

// Membuat tombol secara dinamis
const button = document.createElement('button');
button.textContent = 'Klik Saya!';

// Menambahkan event listener menggunakan addEventListener()
button.addEventListener('click', function() {
    console.log('Tombol diklik menggunakan addEventListener()!');
});

// Menambahkan atribut onclick
button.onclick = function() {
    console.log('Tombol diklik menggunakan atribut onclick!');
};

// Menambahkan tombol ke DOM
document.body.appendChild(button);

Kode ini akan menghasilkan dua pesan di konsol saat tombol diklik, karena kedua metode diimplementasikan.

Kesimpulan

Menambahkan event click ke tombol yang dibuat secara dinamis di JavaScript merupakan tugas yang mudah dengan menggunakan metode addEventListener() atau atribut onclick. Metode addEventListener() adalah metode yang lebih direkomendasikan karena lebih fleksibel dan mudah dikontrol. Ingat untuk memilih metode yang paling sesuai dengan kebutuhan Anda.