EVENT LISTENERS JS

Event Listeners adalah fitur penting dalam JavaScript yang memungkinkan kita untuk membuat tindakan khusus saat sebuah event terjadi, seperti klik mouse, penekanan tombol keyboard, atau saat halaman selesai dimuat.

Pengertian Event Listeners

Event Listeners adalah metode dalam JavaScript yang digunakan untuk menangani event. Event sendiri adalah aksi atau aktivitas yang terjadi di dalam browser yang dapat ditangkap oleh JavaScript untuk ditindaklanjuti. Ini bisa berupa klik mouse, penekanan tombol keyboard, pergerakan mouse, selesai dimuatnya sebuah halaman, dan sebagainya.

Cara Membuat Event Listeners

Dalam JavaScript, cara umum untuk membuat event listener adalah dengan menggunakan metode .addEventListener(). Metode ini memerlukan dua argumen: jenis event yang akan ditangani, dan fungsi yang akan dipanggil saat event tersebut terjadi.

Berikut adalah contoh penggunaan event listener dalam JavaScript:

document.querySelector("button").addEventListener("click", function() {
  alert("Tombol ditekan!");
});

Yang terjadi dalam contoh di atas adalah: ketika pengguna mengklik elemen button, alert dengan pesan “Tombol ditekan!” akan muncul.

Menghapus Event Listeners

Selain menambahkan, kita juga bisa menghapus event listener jika dibutuhkan. Untuk melakukan ini, kita memanfaatkan metode .removeEventListener(). Metode ini memiliki dua argumen: jenis event yang akan dihapus dan fungsi yang sebelumnya sudah terdaftar.

Berikut adalah contoh penggunaan metode .removeEventListener():

function alertFunction() {
  alert("Tombol ditekan!");
}

document.querySelector("button").addEventListener("click", alertFunction);
// Menghapus event listener
document.querySelector("button").removeEventListener("click", alertFunction);

Harap dicatat bahwa kamu hanya dapat menghapus event listener jika kamu sebelumnya telah menyimpan fungsi yang dipanggil dalam event listener tersebut dalam variabel, seperti yang terlihat dalam contoh di atas.

Event Listeners adalah salah satu bagian penting dari JavaScript yang memungkinkan kita untuk membuat halaman web yang interaktif dan responsif terhadap tindakan pengguna. Dengan menggunakan event listener, kita bisa menambahkan dan mengontrol berbagai jenis interaksi dalam situs web kita.