Button Add Event Listener Javascript

MUAZHAN

3 min read

·

Jun 24, 2024

36

Share

Menambahkan Event Listener ke Button dengan JavaScript

Event Listener merupakan mekanisme yang memungkinkan kita untuk menjalankan kode JavaScript saat sebuah event terjadi pada sebuah elemen HTML. Salah satu event yang paling umum digunakan adalah "click" event, yang terjadi ketika pengguna mengklik sebuah tombol.

Cara Menambahkan Event Listener

Berikut adalah cara menambahkan event listener ke button dengan JavaScript:

1. Pilih Elemen Button: Pertama, kita perlu mendapatkan referensi ke elemen button yang ingin kita tambahkan event listener-nya. Kita bisa melakukannya dengan menggunakan metode getElementById() atau dengan menggunakan selector CSS dengan querySelector().

const myButton = document.getElementById('myButton');

2. Tambahkan Event Listener: Setelah kita mendapatkan referensi ke button, kita dapat menambahkan event listener dengan menggunakan metode addEventListener(). Metode ini menerima dua argumen: nama event dan fungsi callback yang akan dijalankan ketika event tersebut terjadi.

myButton.addEventListener('click', function() {
  // Kode yang akan dijalankan ketika button diklik
  console.log('Button diklik!');
});

Contoh Penggunaan

Berikut adalah contoh sederhana bagaimana menambahkan event listener ke button untuk menampilkan pesan alert saat button diklik:

  
  
  


  Klik Saya

  

Penjelasan

• myButton.addEventListener('click', function() { ... });: Menambahkan event listener "click" ke button dengan ID "myButton". Fungsi callback di dalam kurung kurawal akan dijalankan saat button diklik.
• alert('Button diklik!');: Fungsi callback ini akan menampilkan pesan alert "Button diklik!" saat button diklik.

Kesimpulan

Menambahkan event listener ke button dengan JavaScript adalah cara yang mudah untuk membuat button menjadi interaktif dan menjalankan kode JavaScript saat button diklik. Dengan menggunakan metode addEventListener(), kita dapat dengan mudah menambahkan event listener ke berbagai jenis event, seperti "click", "mouseover", "mouseout", dan banyak lagi.