Add Click Event Listener To Class Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

44

Share

Cara Menambahkan Event Listener "Click" pada Class di JavaScript

Event listener "click" di JavaScript memungkinkan kita untuk menjalankan fungsi tertentu ketika sebuah elemen diklik. Jika kita ingin menambahkan event listener "click" pada beberapa elemen yang memiliki kelas yang sama, kita bisa menggunakan metode querySelectorAll dan forEach untuk mengiterasi melalui elemen-elemen tersebut dan menambahkan event listener ke masing-masing.

Berikut adalah langkah-langkahnya:

1. Dapatkan Elemen dengan Kelas Tertentu

Gunakan metode querySelectorAll untuk mendapatkan semua elemen HTML dengan kelas tertentu. Contohnya, untuk mendapatkan semua elemen dengan kelas my-button:

const buttons = document.querySelectorAll('.my-button');

2. Iterasi melalui Elemen-elemen

Gunakan metode forEach untuk mengiterasi melalui setiap elemen yang ditemukan:

buttons.forEach(button => {
  // Tambahkan event listener "click" ke setiap elemen
});

3. Tambahkan Event Listener "Click"

Di dalam fungsi forEach, tambahkan event listener "click" ke setiap elemen menggunakan metode addEventListener:

buttons.forEach(button => {
  button.addEventListener('click', () => {
    // Lakukan sesuatu ketika tombol diklik
  });
});

Contoh Implementasi

Berikut adalah contoh kode JavaScript yang menambahkan event listener "click" pada semua elemen dengan kelas my-button. Ketika tombol diklik, fungsi handleClick akan dijalankan:

  


  Tombol 1
  Tombol 2
  Tombol 3

  

Penjelasan

1. Kode querySelectorAll('.my-button') mendapatkan semua elemen dengan kelas my-button.
2. Kode forEach iterasi melalui setiap elemen button yang ditemukan.
3. addEventListener('click', handleClick) menambahkan event listener "click" ke setiap button, dan ketika tombol diklik, fungsi handleClick akan dijalankan.
4. Fungsi handleClick menampilkan pesan "Tombol diklik!" sebagai alert.

Kesimpulan

Dengan menggunakan metode querySelectorAll dan forEach bersama dengan addEventListener, kita dapat menambahkan event listener "click" ke beberapa elemen dengan kelas yang sama dengan mudah dan efisien. Ini sangat berguna untuk membuat aplikasi web yang responsif dan interaktif.