Addeventlistener Javascript Adalah

MUAZHAN

3 min read

·

Jun 18, 2024

34

Share

addEventListener JavaScript: Mendengarkan Peristiwa di Web

addEventListener adalah sebuah metode dalam JavaScript yang memungkinkan Anda untuk menambahkan listener untuk suatu peristiwa pada elemen HTML. Ketika peristiwa yang dipantau terjadi, kode yang Anda tetapkan dalam listener akan dijalankan.

Cara Kerja addEventListener

1. Menentukan Event Listener: Anda pertama kali menentukan tipe peristiwa yang ingin Anda tanggapi. Beberapa contohnya meliputi:
   • click - Ketika pengguna mengklik elemen
   • mouseover - Ketika kursor mouse melewati elemen
   • keydown - Ketika pengguna menekan tombol keyboard
   • load - Ketika halaman atau gambar selesai dimuat
   • submit - Ketika formulir dikirim
2. Menentukan Function Handler: Anda perlu menyediakan sebuah fungsi yang akan dijalankan ketika peristiwa terjadi.
3. Menambahkan Event Listener: Metode addEventListener digunakan untuk menambahkan listener pada elemen HTML.

Sintaks

element.addEventListener(tipe_peristiwa, function_handler);

Contoh:

// Mendapatkan elemen tombol dengan ID "myButton"
const myButton = document.getElementById("myButton");

// Menambahkan event listener untuk event "click"
myButton.addEventListener("click", function() {
    // Kode yang akan dijalankan ketika tombol diklik
    alert("Tombol diklik!"); 
});

Keuntungan Menggunakan addEventListener

• Lebih Fleksibel: Anda dapat menambahkan beberapa event listener untuk satu peristiwa pada elemen yang sama.
• Mengatur Urutan Eksekusi: Event listener dapat ditambahkan dalam urutan tertentu, memungkinkan Anda mengontrol urutan eksekusi fungsi handler.
• Menghapus Event Listener: Anda dapat menghapus listener yang telah Anda tambahkan menggunakan metode removeEventListener.

Contoh Penggunaan

  Klik Saya

  

Dalam contoh ini, ketika pengguna mengklik tombol dengan ID "myButton", sebuah alert box akan muncul menampilkan pesan "Tombol diklik!".

Kesimpulan

addEventListener adalah sebuah alat yang powerful dalam JavaScript untuk membangun interaksi dinamis dalam website. Dengan menggunakannya, Anda dapat membuat aplikasi web yang lebih responsif dan user-friendly.