Event Listener JavaScript: Menangani Klik dan Input

Dalam JavaScript, event listener adalah cara untuk mendeteksi dan merespons aksi pengguna pada halaman web seperti klik tombol, mengetik teks, atau menggerakkan kursor. Event listener membuat halaman web terasa hidup dan interaktif, karena setiap tindakan pengguna bisa memicu kode tertentu untuk dijalankan. Untuk itu mari kita belajar Event Listener JavaScript dalam menangani interaksi pengguna.

1. Fungsi addEventListener()

Metode addEventListener() digunakan untuk menambahkan pendengar peristiwa (event) ke sebuah elemen.

Struktur dasar:

element.addEventListener(event, function);

Keterangan:

• element → elemen HTML yang akan diberi event

• event → nama peristiwa seperti "click", "input", "mouseover", dll

• function → fungsi yang dijalankan saat event terjadi

Contoh sederhana:

document.getElementById("tombol").addEventListener("click", function() {
  alert("Tombol diklik!");
});

2. Menangani Event Klik (Click Event)

Event paling umum di web adalah klik tombol.
Contoh:

<button id="klikSaya">Klik Saya!</button>
<p id="pesan"></p>

<script>
let tombol = document.getElementById("klikSaya");
let pesan = document.getElementById("pesan");

tombol.addEventListener("click", function() {
  pesan.innerText = "Tombol berhasil diklik!";
});
</script>

Penjelasan:

• Saat pengguna menekan tombol, fungsi di dalam addEventListener() dijalankan.

• Paragraf <p> akan berubah menjadi “Tombol berhasil diklik!”.

Cocok digunakan untuk:

• Tombol “Kirim”, “Tambah ke Keranjang”, “Login”, dsb.

3. Menangani Input Teks (Input Event)

Kamu juga bisa mendeteksi setiap kali pengguna mengetik sesuatu di input teks.

<input type="text" id="nama" placeholder="Ketik nama kamu">
<p id="hasil"></p>

<script>
let inputNama = document.getElementById("nama");
let hasil = document.getElementById("hasil");

inputNama.addEventListener("input", function() {
  hasil.innerText = "Halo, " + inputNama.value + "!";
});
</script>

Penjelasan:

• Event "input" aktif setiap kali isi teks berubah.

• Paragraf langsung menampilkan nama yang diketik pengguna secara real-time.

Ini sering digunakan pada:

• Form pencarian

• Validasi input

• Tampilan live preview

4. Menangani Hover (Mouseover & Mouseout)

Event mouseover terjadi saat kursor masuk ke elemen, sedangkan mouseout terjadi saat keluar dari elemen.

<div id="box" style="width:150px;height:150px;background:gray;text-align:center;line-height:150px;color:white;">
  Arahkan Kursor
</div>

<script>
let box = document.getElementById("box");

box.addEventListener("mouseover", function() {
  box.style.background = "green";
  box.innerText = "Mouse di atas!";
});

box.addEventListener("mouseout", function() {
  box.style.background = "gray";
  box.innerText = "Arahkan Kursor";
});
</script>

Penjelasan:

• Saat kursor masuk, warna berubah menjadi hijau.

• Saat keluar, kembali ke warna semula.

Event ini sering dipakai untuk:

• Efek hover pada tombol atau kartu produk

• Animasi interaktif saat pengguna bergerak di halaman

5. Menggunakan Fungsi Terpisah (Lebih Rapi)

Kamu juga bisa menulis fungsi secara terpisah agar kode lebih bersih:

function ubahPesan() {
  document.getElementById("pesan").innerText = "Event berhasil dijalankan!";
}

document.getElementById("tombol").addEventListener("click", ubahPesan);

Kelebihan: mudah digunakan kembali untuk event lain tanpa menulis ulang fungsi.

Perbandingan: onClick vs addEventListener()

Metode	Kelebihan	Kekurangan
onclick	Mudah digunakan, langsung di HTML	Hanya bisa 1 event per elemen
addEventListener()	Dapat menambahkan banyak event, lebih fleksibel	Sedikit lebih panjang penulisannya

Contoh dua event berbeda pada elemen yang sama:

let tombol = document.getElementById("tombol");

tombol.addEventListener("click", function() {
  console.log("Klik pertama!");
});

tombol.addEventListener("click", function() {
  console.log("Klik kedua!");
});

Kedua event tetap berjalan — keunggulan utama addEventListener().

Kesimpulan

addEventListener() adalah fitur penting dalam JavaScript untuk menangani interaksi pengguna secara dinamis. Dengan event listener, kamu bisa:

• Menangani klik tombol dengan click

• Mendeteksi input pengguna dengan input

• Membuat efek hover interaktif dengan mouseover dan mouseout

Kemampuan ini menjadikan website jauh lebih responsif dan menarik.