Button Addeventlistener Click Javascript

MUAZHAN

3 min read

·

Jun 18, 2024

40

Share

Menambahkan Event Listener "Click" pada Button dengan JavaScript

Event listener merupakan fungsi yang dijalankan ketika suatu event terjadi pada elemen HTML. Dalam kasus ini, kita akan menambahkan event listener "click" pada tombol HTML menggunakan JavaScript. Ini memungkinkan kita untuk menjalankan fungsi tertentu ketika tombol diklik.

Cara Menambahkan Event Listener "Click"

1. Pilih Elemen:

   • Dengan ID:

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

   • Dengan Nama Class:

     const myButton = document.querySelector(".myButton");
     

   • Dengan Tag HTML:

     const myButton = document.querySelector("button"); // Mengambil tombol pertama
     

2. Tambahkan Event Listener:

   myButton.addEventListener("click", function() {
       // Kode yang akan dijalankan ketika tombol diklik
   });
   

   • addEventListener() digunakan untuk menambahkan event listener.
   • click adalah nama event yang dipantau.
   • Fungsi anonim (function() { ... }) berisi kode yang akan dijalankan saat event terjadi.

Contoh Penggunaan

  


  Klik Saya

  

Penjelasan:

• Kode HTML mendefinisikan sebuah tombol dengan ID "myButton".
• Kode JavaScript memilih tombol dengan ID "myButton" dan menambahkan event listener "click".
• Saat tombol diklik, fungsi anonim dijalankan, yang menampilkan pesan "Tombol diklik!" melalui alert().

Keuntungan Menggunakan Event Listener

• Fleksibel: Dapat digunakan untuk berbagai macam event, tidak hanya "click".
• Multi-Event: Anda dapat menambahkan banyak event listener untuk satu elemen.
• Pengelolaan Event yang Lebih Baik: Memisahkan kode event dari kode HTML untuk struktur dan organisasi yang lebih baik.

Penutup

Dengan menggunakan event listener "click", Anda dapat dengan mudah memicu fungsi JavaScript ketika tombol diklik. Ini memberikan kontrol yang lebih besar atas interaksi pengguna pada halaman web Anda.