Add Event Listener Javascript Click

MUAZHAN

3 min read

·

Jun 22, 2024

35

Share

Menambahkan Event Listener "Click" dalam JavaScript

Event listener memungkinkan Anda untuk memicu kode JavaScript saat terjadi sebuah event pada elemen HTML. Salah satu event yang paling umum adalah "click", yang terjadi ketika pengguna mengklik elemen tersebut.

Cara Menambahkan Event Listener "Click"

Untuk menambahkan event listener "click" pada sebuah elemen HTML, Anda dapat menggunakan metode addEventListener(). Berikut adalah langkah-langkahnya:

1. Pilih Elemen: Anda perlu memilih elemen HTML yang ingin Anda tambahkan event listener "click". Anda dapat menggunakan metode getElementById(), querySelector(), atau querySelectorAll().

2. Tambahkan Event Listener: Gunakan metode addEventListener() dengan dua parameter:

   • Nama Event: Dalam kasus ini, 'click'.
   • Fungsi Callback: Fungsi yang akan dijalankan ketika event "click" terjadi.

Contoh Kode:

// Pilih elemen dengan ID "myButton"
const myButton = document.getElementById('myButton');

// Tambahkan event listener "click"
myButton.addEventListener('click', function() {
  // Kode yang akan dijalankan saat tombol diklik
  console.log('Tombol diklik!');
});

Contoh Penggunaan

1. Menampilkan Pesan:

  
  


  Klik Saya

  

2. Mengubah Style Elemen:

  
  
  


  

    Ini adalah sebuah div.
  

  Ubah Warna

  

Catatan Penting

• Anda dapat menambahkan lebih dari satu event listener "click" pada sebuah elemen.
• Event listener "click" dapat dihapus dengan metode removeEventListener().

Dengan menggunakan event listener "click", Anda dapat membuat website yang lebih interaktif dan responsif.