Event Handling yang Efisien di JavaScript: Delegasi dan Propagasi

Bayangkan Anda membuat halaman web dengan banyak tombol, daftar item, atau elemen interaktif lainnya. Lalu, Anda menambahkan event listener satu per satu untuk setiap elemen. Hasilnya? Kode jadi panjang, berat, dan sulit diatur.

Di sinilah konsep delegasi dan propagasi event menjadi penyelamat. Dengan memahami kedua konsep ini, Anda bisa:

• Menulis kode lebih ringkas dan efisien.
• Menghindari duplikasi event listener.
• Meningkatkan performa halaman web Anda.

Apa Itu Event Handling?

Event handling adalah proses menangani kejadian (event) yang terjadi di halaman web, seperti klik tombol, gerakan mouse, atau input dari pengguna.

Contoh paling sederhana:

document.querySelector('button').addEventListener('click', () => {
  alert('Tombol diklik!');
});

document.querySelector('button').addEventListener('click', () => {
  alert('Tombol diklik!');
});

1. Memahami Event Propagation: Bubbling dan Capturing

Sebelum masuk ke delegation, penting untuk memahami bagaimana sebuah event “mengalir” di dalam DOM.

1. Capturing Phase → Event bergerak dari elemen paling luar (document) menuju elemen yang diklik.
2. Target Phase → Event mencapai elemen yang sebenarnya diklik.
3. Bubbling Phase → Event “naik kembali” dari elemen target ke atas (parent elements).

Secara default, JavaScript menggunakan bubbling phase, artinya event bisa ditangkap oleh elemen induk setelah event terjadi di anaknya.

Contoh:

HTML

<div id="parent">
  <button id="child">Klik Saya</button>
</div>

<div id="parent">
  <button id="child">Klik Saya</button>
</div>

JavaScript

document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent diklik');
});

document.getElementById('child').addEventListener('click', () => {
  console.log('Child diklik');
});

document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent diklik');
});

document.getElementById('child').addEventListener('click', () => {
  console.log('Child diklik');
});

Ketika tombol diklik, urutannya adalah:

➡️ “Child diklik”
➡️ “Parent diklik”

2. Event Delegation: Menangani Banyak Elemen dengan Satu Listener

Event delegation memanfaatkan konsep bubbling untuk menangani banyak elemen sekaligus menggunakan satu event listener saja di parent-nya.

Contoh Praktis
Misalkan Anda memiliki daftar tombol:
HTML

<div id="button-container">
  <button data-id="1">Tombol 1</button>
  <button data-id="2">Tombol 2</button>
  <button data-id="3">Tombol 3</button>
</div>

<div id="button-container">
  <button data-id="1">Tombol 1</button>
  <button data-id="2">Tombol 2</button>
  <button data-id="3">Tombol 3</button>
</div>

Alih-alih menambahkan listener ke setiap tombol, cukup tambahkan satu saja di div induk:

document.getElementById('button-container').addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    console.log(`Anda menekan tombol dengan ID: ${event.target.dataset.id}`);
  }
});

document.getElementById('button-container').addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    console.log(`Anda menekan tombol dengan ID: ${event.target.dataset.id}`);
  }
});

Apa yang terjadi?

• Ketika tombol diklik, event akan “bubble up” ke div induk.
• Listener di div mendeteksi elemen mana yang sebenarnya diklik (event.target).
• Hasilnya: semua tombol bekerja tanpa harus menulis 3 listener terpisah!

Kelebihan Event Delegation

1. Lebih efisien: Hanya satu event listener untuk banyak elemen.
2. Lebih fleksibel: Cocok untuk elemen yang dihasilkan secara dinamis (misalnya ditambahkan lewat JavaScript setelah halaman dimuat).
3. Lebih mudah dikelola: Anda tidak perlu menghapus listener satu per satu saat elemen dihapus.

Menghentikan Event Propagation

Kadang, Anda tidak ingin event “naik ke atas”. Misalnya, Anda punya tombol di dalam div dan hanya ingin tombolnya yang bereaksi.
Gunakan event.stopPropagation() untuk menghentikan aliran event:

document.getElementById('child').addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('Hanya child yang diklik');
});

document.getElementById('child').addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('Hanya child yang diklik');
});

Dengan begitu, event tidak akan diteruskan ke parent.

Sekarang Anda sudah tahu cara kerja propagasi event dan bagaimana menerapkan delegasi event untuk membuat JavaScript Anda lebih efisien dan mudah dirawat.
Teknik ini adalah dasar penting yang digunakan di banyak framework modern seperti React atau Vue.

Jika Anda ingin melangkah lebih jauh, baca juga artikel kami tentang “Menguasai Destructuring dan Spread Operator di JavaScript” untuk memperluas kemampuan pengolahan data Anda..