Add Event Listener Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

29

Share

Add Event Listener di JavaScript

Event listener dalam JavaScript memungkinkan kita untuk merespons interaksi pengguna atau kejadian yang terjadi di dalam sebuah website. Event listener "mendengarkan" event tertentu, seperti klik mouse, perubahan nilai input, atau loading suatu halaman, dan menjalankan kode tertentu saat event tersebut terjadi.

Cara Menambahkan Event Listener

Untuk menambahkan event listener, kita dapat menggunakan metode addEventListener(). Metode ini menerima tiga parameter:

1. Nama Event: Jenis event yang ingin kita tanggapi. Contohnya: click, mouseover, keydown, submit, load.
2. Fungsi Handler: Fungsi yang akan dijalankan ketika event terjadi.
3. (Opsional) Use Capture: Boolean yang menentukan apakah event di tangani dalam fase "capture" atau "bubbling". Secara default, event di tangani dalam fase "bubbling".

Berikut contoh sederhana untuk menambahkan event listener pada tombol yang akan menampilkan pesan "Tombol ditekan!" saat tombol tersebut diklik:

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

myButton.addEventListener("click", function() {
  alert("Tombol ditekan!");
});

Kode di atas akan mencari elemen HTML dengan id myButton dan menambahkan event listener "click" padanya. Ketika tombol diklik, fungsi anonim yang kita definisikan akan dijalankan dan menampilkan pesan "Tombol ditekan!".

Contoh Penggunaan Event Listener

Berikut beberapa contoh penggunaan event listener dalam berbagai scenario:

1. Mengubah Style Elemen Saat Mouse Hover:

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

myDiv.addEventListener("mouseover", function() {
  myDiv.style.backgroundColor = "yellow";
});

myDiv.addEventListener("mouseout", function() {
  myDiv.style.backgroundColor = "white";
});

Kode ini akan mengubah warna latar belakang myDiv menjadi kuning saat mouse diarahkan ke atasnya, dan mengembalikannya ke warna putih saat mouse keluar dari area myDiv.

2. Mengambil Nilai Input:

const inputField = document.getElementById("myInput");

inputField.addEventListener("input", function() {
  const inputValue = inputField.value;
  console.log("Nilai input:", inputValue);
});

Kode ini akan menampilkan nilai input di konsol browser setiap kali nilai input berubah.

3. Mencegah Form Submit Secara Default:

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

myForm.addEventListener("submit", function(event) {
  event.preventDefault();
  // Lakukan tindakan lain setelah form submit, seperti validasi
});

Kode ini akan mencegah form dengan id myForm dari melakukan submit secara default dan menjalankan fungsi handler untuk melakukan tindakan lain.

Penting untuk Diingat

• Multiple Event Listener: Kita dapat menambahkan beberapa event listener pada satu elemen untuk event yang berbeda.
• Order Event Handling: Event listener dijalankan sesuai urutan penambahannya.
• Event Bubbling: Ketika sebuah event dijalankan, event tersebut akan "gelembung" naik ke atas dalam hierarki DOM.

Dengan memahami konsep event listener, Anda dapat membuat website yang lebih interaktif dan responsif terhadap tindakan pengguna.