Tujuan Pembelajaran

Memahami cara kerja event listener
Mengerti event bubbling, capturing, dan delegation

Analogi

Diagram


      Event = Lonceng Alarm:

[User klik] → [Event terjadi] → [Listener dengar] → [Callback jalan]

Propagation = Riak Air:
[button] → [div] → [body] → [document]
    (bubbling ke atas)

Event seperti lonceng — ketika terjadi, listener bereaksi

Penjelasan Konsep

Event Handling

Event Handling adalah mekanisme JavaScript untuk merespons aksi yang dilakukan user pada halaman web. Setiap kali user mengklik tombol, menggerakkan mouse, menekan keyboard, menggulir halaman, atau bahkan mengubah ukuran jendela browser — semua itu menghasilkan event yang bisa kamu tangkap dan proses.

Analogi: Event Seperti Lonceng Alarm.

Bayangkan kamu punya rumah pintar dengan berbagai sensor. Ada sensor pintu, sensor gerak, sensor suhu, dan sensor kebocoran air. Setiap kali sensor mendeteksi sesuatu, lonceng alarm berbunyi. Kamu bisa mendaftarkan “tindakan apa yang harus dilakukan” untuk setiap jenis alarm.

Event di web bekerja dengan cara yang sama. User melakukan sesuatu → Event terjadi → Listener menangkap → Callback function dijalankan.

Cara Kerja Event Handling

Ada tiga langkah utama:

Pilih elemen target — Elemen HTML mana yang akan dipantau? Tombol? Form? Link?
Tentukan jenis event — Event apa yang akan didengarkan? Klik? Hover? Submit?
Tulis callback function — Apa yang harus dilakukan saat event terjadi?

Event Listener dengan addEventListener

Metode modern untuk menangani event adalah menggunakan addEventListener(). Ini memungkinkan kamu menambahkan banyak listener untuk event yang sama pada satu elemen — sesuatu yang tidak bisa dilakukan dengan atribut HTML seperti onclick.

Event Bubbling vs Capturing

Ketika event terjadi pada elemen yang bersarang (nested), browser memiliki dua bagian:

Capturing Phase — Event bergerak dari elemen paling luar ke elemen target.
Bubbling Phase — Event “menguap” dari elemen target kembali ke elemen paling luar.

Secara default, event listener berjalan pada bagian bubbling. Kamu bisa mengubahnya dengan parameter ketiga.

Event Delegation — Teknik Efisien

Bayangkan kamu punya daftar 100 item dan ingin menangani klik pada masing-masing. Menambahkan 100 event listener secara individual sangat tidak efisien. Event delegation memungkinkan kamu menambahkan satu listener ke elemen parent, lalu memeriksa event.target untuk menentukan elemen mana yang sebenarnya diklik.

Contoh Kode

javascript

// EVENT LISTENER DASAR
const tombol = document.getElementById('tombolku');
tombol.addEventListener('click', (event) => {
  console.log('Target:', event.target);
  console.log('X:', event.clientX, 'Y:', event.clientY);
});

// EVENT PROPAGATION
document.getElementById('child').addEventListener('click', (e) => {
  console.log('Child clicked');
  // e.stopPropagation(); // Hentikan bubbling!
});
document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent clicked');
});

// EVENT DELEGATION (EFISIEN)
document.getElementById('container').addEventListener('click', (e) => {
  if (e.target.matches('.btn')) {
    console.log('Button diklik:', e.target.textContent);
  }
});

Penjelasan Kode

Baris 2-6: Event listener dengan event object. Baris 9-15: Bubbling dari child ke parent. Baris 18-22: Event delegation — 1 listener untuk banyak elemen.

Prompt AI

Jelaskan kapan sebaiknya menggunakan event delegation. Apa kelebihannya?

Pertanyaan Reflektif

Buka website interaktif. Lihat bagaimana event merambat di DevTools. Coba gunakan stopPropagation().