Addeventlistener Click Javascript

MUAZHAN

3 min read

·

Jun 18, 2024

33

Share

Memahami Penggunaan addEventListener('click', function) dalam JavaScript

addEventListener('click', function) adalah sebuah metode dalam JavaScript yang digunakan untuk menambahkan event listener untuk event click pada sebuah elemen HTML. Event listener ini akan menjalankan fungsi yang ditentukan saat sebuah elemen diklik. Berikut adalah penjelasan lebih detail tentang cara kerja dan penggunaan addEventListener('click', function):

1. Apa itu addEventListener?

addEventListener adalah sebuah metode yang digunakan untuk menambahkan event listener pada sebuah elemen. Event listener adalah fungsi yang akan dieksekusi ketika sebuah event tertentu terjadi pada elemen tersebut.

2. Parameter addEventListener

Metode addEventListener menerima tiga parameter:

• eventType: Jenis event yang ingin didengarkan. Dalam kasus ini, 'click'.
• callbackFunction: Fungsi yang akan dijalankan ketika event click terjadi.
• useCapture (opsional): Sebuah nilai boolean yang menentukan apakah event harus diproses dari fase capture atau bubble. Secara default, useCapture adalah false.

3. Contoh Penggunaan addEventListener('click', function)

// Seleksi elemen HTML dengan ID "myButton"
const myButton = document.getElementById("myButton");

// Tambah event listener untuk event 'click'
myButton.addEventListener('click', function() {
  // Fungsi yang akan dijalankan ketika tombol diklik
  console.log("Tombol telah diklik!");
  // Lakukan tindakan lain yang diperlukan
});

Kode di atas akan menampilkan pesan "Tombol telah diklik!" di console saat tombol dengan ID "myButton" diklik.

4. Keuntungan Menggunakan addEventListener

• Lebih fleksibel: Anda dapat menambahkan beberapa event listener untuk sebuah elemen, dan setiap listener dapat dikaitkan dengan fungsi yang berbeda.
• Meningkatkan modularitas: Fungsi yang ditugaskan ke addEventListener dapat dipanggil dari berbagai tempat di kode Anda, sehingga meningkatkan modularitas.
• Memisahkan logika: Memisahkan logika event handling dari kode HTML membuat kode Anda lebih mudah dibaca dan dipelihara.

5. Cara Menghapus Event Listener

Anda dapat menghapus event listener yang telah ditambahkan menggunakan metode removeEventListener:

myButton.removeEventListener('click', function() {
  // Fungsi yang sebelumnya ditambahkan
});

6. Kesimpulan

addEventListener('click', function) adalah metode penting dalam JavaScript yang memungkinkan Anda untuk membuat elemen HTML interaktif dengan responsif terhadap event click. Gunakan metode ini untuk membuat kode yang lebih fleksibel, modular, dan mudah dipelihara.