Event Listener

Event Listener adalah cara untuk "mendengarkan" atau "menunggu" peristiwa (event) tertentu yang terjadi pada elemen HTML dan kemudian menjalankan kode JavaScript tertentu ketika peristiwa tersebut terjadi.

Misalnya, Anda dapat menggunakan Event Listener untuk merespons klik tombol, perubahan isi form, atau peristiwa lainnya di halaman web Anda.

Berikut langkah-langkah dasar untuk menggunakan Event Listener:

1. Menentukan elemen HTML yang akan didengarkan

Pertama, pilih elemen HTML yang akan Anda tambahkan Event Listener-nya. Misalnya, jika Anda ingin merespons saat tombol diklik, Anda akan memilih tombol tersebut dengan menggunakan document.querySelector() atau metode lainnya.

const tombol = document.querySelector('#tombolKlik');

2. Menambahkan Event Listener

Selanjutnya, Anda akan menambahkan Event Listener ke elemen tersebut. Event Listener dapat digunakan untuk berbagai jenis peristiwa, seperti 'click', 'change', 'keydown', dan banyak lagi. Contohnya, untuk mendengarkan klik tombol:

tombol.addEventListener('click', function() {
  // Kode yang akan dijalankan saat tombol diklik
});

3. Menyisipkan Kode yang Akan Dijalankan

Di dalam fungsi Event Listener, Anda dapat menambahkan kode JavaScript yang akan dijalankan saat peristiwa terjadi. Ini bisa berupa tindakan seperti mengubah isi halaman, mengirim data ke server, atau melakukan apa pun yang diperlukan.

tombol.addEventListener('click', function() {
  // Kode yang akan dijalankan saat tombol diklik
  alert('Tombol telah diklik!');
});

Contoh Lengkap:

Berikut ini adalah contoh lengkap penggunaan Event Listener untuk merespons klik tombol:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Event Listener</title>
</head>
<body>
  <button id="tombolKlik">Klik Saya</button>

  <script>
    const tombol = document.querySelector('#tombolKlik');

    tombol.addEventListener('click', function() {
      alert('Tombol telah diklik!');
    });
  </script>
</body>
</html>

Dengan menggunakan Event Listener, Anda dapat membuat halaman web yang lebih interaktif dan responsif terhadap tindakan pengguna. Semoga tutorial ini membantu!

PREVIOUS
NEXT