EVENT PROPAGATION DAN DELEGATION

Event Propagation dan Delegation adalah dua konsep penting dalam pemrograman JavaScript, terutama ketika berurusan dengan event dalam Document Object Model (DOM). Bagi seorang pengembang JavaScript, memahami dua konsep ini sangat penting untuk memaksimalkan interaksi pengguna dengan halaman web.

Event Propagation

Event propagation menjelaskan bagaimana event bereaksi terhadap struktur hierarki DOM. Ada tiga fase dalam event propagation: capturing phase, target phase, dan bubbling phase.

Capturing phase

Pada fase ini, event turun melalui struktur DOM hingga mencapai target event. Contoh, jika kamu memiliki struktur DOM seperti ini:

<div>
  <button>Click me</button>
</div>

Ketika button diklik, event akan mengikuti jalur dari document ke div sebelum akhirnya sampai ke button.

Target phase

Ini adalah tahap saat event benar-benar terjadi pada target. Menggunakan contoh di atas, target phase terjadi ketika ‘click’ event terjadi pada button.

Bubbling phase

Setelah event menjangkau target, event tersebut akan mulai ‘menggelembung’ kembali melalui DOM. Menggunakan contoh sebelumnya, setelah button diklik, event akan ‘menggelembung’ kembali ke div dan akhirnya ke document.

Event Delegation

Event Delegation adalah teknik di mana kita menempatkan event listener pada satu elemen induk, daripada menempatkannya pada semua elemen anak. Penggunaan teknik ini dapat meningkatkan kinerja dan menghindari potensi bug.

Misalkan jika kamu memiliki daftar item dan ingin melakukan sesuatu ketika item tertentu diklik. Tanpa Event Delegation, kamu harus meletakkan event listener pada setiap item.

<ul id="itemList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

var items = document.querySelectorAll('#itemList li');

for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
    // lakukan sesuatu
  });
}

Namun dengan Event Delegation, kamu hanya perlu meletakkan event listener pada elemen ul dan menggunakan event.target untuk mengetahui item mana yang diklik.

document.querySelector('#itemList').addEventListener('click', function(event) {
  // event.target adalah item yang diklik
});

Dengan memahami dan menerapkan Event Propagation dan Delegation, kamu dapat menulis kode JavaScript yang lebih efisien dan efektif.