Cara Menggunakan Event Listener di JavaScript

Interaktivitas adalah jantung dari sebuah web application. Bagaimana cara JavaScript "mendengarkan" saat pengguna mengklik tombol, mengetik di form, atau menggulir halaman? Jawabannya adalah Event Listener. Dengan addEventListener(), kita bisa menentukan kode apa yang harus dijalankan ketika sebuah event terjadi pada suatu elemen.

Cara Dasar Menggunakan addEventListener

Sintaks dasarnya adalah elemen.addEventListener(namaEvent, fungsiHandler):

const tombol = document.getElementById('btn-klik');

// Cara 1: Fungsi langsung (anonymous function)
tombol.addEventListener('click', function() {
  console.log('Tombol diklik!');
});

// Cara 2: Arrow function (lebih ringkas)
tombol.addEventListener('click', () => {
  alert('Halo dari tombol!');
});

// Cara 3: Fungsi terpisah (lebih mudah di-remove nanti)
function handleKlik() {
  console.log('Fungsi handler terpisah dipanggil.');
}
tombol.addEventListener('click', handleKlik);

// Menghapus event listener (harus menggunakan referensi fungsi yang sama)
tombol.removeEventListener('click', handleKlik);

Objek Event

Setiap event listener menerima objek event sebagai parameter pertama. Objek ini berisi informasi berguna tentang event yang terjadi:

const kotak = document.getElementById('kotak');

kotak.addEventListener('click', function(event) {
  console.log('Elemen yang diklik:', event.target);       // elemen spesifik yang diklik
  console.log('Tipe event:', event.type);                  // 'click'
  console.log('Posisi X mouse:', event.clientX);
  console.log('Posisi Y mouse:', event.clientY);

  // Mencegah perilaku default (misal: mencegah link pindah halaman)
  event.preventDefault();

  // Menghentikan event agar tidak "naik" ke elemen induk
  event.stopPropagation();
});

Event Keyboard

Mendeteksi penekanan tombol keyboard sangat berguna untuk membuat shortcut atau validasi real-time:

const inputCari = document.getElementById('input-cari');

// keydown — saat tombol ditekan
// keyup — saat tombol dilepas
// keypress — sudah deprecated, hindari penggunaan

inputCari.addEventListener('keydown', function(e) {
  console.log('Tombol ditekan:', e.key);   // nama tombol: 'Enter', 'a', 'Backspace', dll
  console.log('Kode tombol:', e.code);      // 'Enter', 'KeyA', 'Backspace'

  if (e.key === 'Enter') {
    console.log('Mencari:', this.value);
    // lakukan pencarian...
  }

  // Cek kombinasi Ctrl + S
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault(); // Cegah dialog simpan browser
    console.log('Menyimpan...');
  }
});

Event pada Form dan Input

const form = document.getElementById('my-form');
const inputNama = document.getElementById('input-nama');

// change — saat nilai berubah dan elemen kehilangan fokus
inputNama.addEventListener('change', (e) => {
  console.log('Nilai berubah menjadi:', e.target.value);
});

// input — saat nilai berubah secara real-time (setiap karakter)
inputNama.addEventListener('input', (e) => {
  const jumlahKarakter = e.target.value.length;
  document.getElementById('counter').textContent = `${jumlahKarakter}/100 karakter`;
});

// focus & blur
inputNama.addEventListener('focus', () => {
  inputNama.style.borderColor = 'blue';
});
inputNama.addEventListener('blur', () => {
  inputNama.style.borderColor = '';
});

// submit form
form.addEventListener('submit', (e) => {
  e.preventDefault(); // Cegah reload halaman
  console.log('Form dikirim!');
});

Event Delegation

Daripada menambahkan event listener ke setiap elemen satu per satu (yang tidak efisien), kita bisa memanfaatkan event delegation — pasang satu listener di elemen induk dan gunakan event.target untuk menentukan elemen mana yang diklik:

const daftar = document.getElementById('daftar-item');

// Satu listener untuk semua item dan tombol hapus di dalamnya
daftar.addEventListener('click', function(e) {
  // Cek apakah yang diklik adalah tombol hapus
  if (e.target.classList.contains('btn-hapus')) {
    const item = e.target.closest('li'); // Cari elemen <li> terdekat
    item.remove();
    console.log('Item dihapus!');
  }

  // Cek apakah yang diklik adalah teks item
  if (e.target.tagName === 'SPAN') {
    e.target.classList.toggle('selesai');
  }
});

// Keuntungan: listener ini otomatis bekerja untuk item baru yang ditambahkan!
function tambahItem(teks) {
  daftar.insertAdjacentHTML('beforeend', `
    <li>
      <span>${teks}</span>
      <button class="btn-hapus">Hapus</button>
    </li>
  `);
}

Event Scroll dan Resize

// Event scroll — saat pengguna menggulir halaman
window.addEventListener('scroll', function() {
  const posisiScroll = window.scrollY;

  // Tampilkan tombol "kembali ke atas" jika sudah scroll lebih dari 300px
  const btnKembaliAtas = document.getElementById('btn-atas');
  if (posisiScroll > 300) {
    btnKembaliAtas.style.display = 'block';
  } else {
    btnKembaliAtas.style.display = 'none';
  }
});

// Event resize — saat ukuran jendela berubah
window.addEventListener('resize', function() {
  console.log('Lebar jendela:', window.innerWidth);
  console.log('Tinggi jendela:', window.innerHeight);
});

Event yang Sering Digunakan

• click — klik mouse pada elemen
• dblclick — klik dua kali
• mouseover / mouseout — kursor masuk/keluar area elemen
• keydown / keyup — tombol keyboard ditekan/dilepas
• input / change — perubahan nilai input
• submit — form dikirim
• focus / blur — elemen mendapat/kehilangan fokus
• load — halaman atau resource selesai dimuat
• DOMContentLoaded — DOM selesai diparse
• scroll — halaman digulir

Kesimpulan

Event Listener adalah fondasi dari interaktivitas web. Dengan memahami cara addEventListener() bekerja, memanfaatkan objek event, menggunakan event delegation untuk efisiensi, dan mengetahui berbagai jenis event yang tersedia, kamu sudah memiliki alat untuk membangun antarmuka yang responsif dan interaktif. Selalu pilih event delegation saat menangani elemen dinamis atau daftar panjang untuk performa yang optimal.