Event Delegation

TL;DR: Event delegation adalah teknik pemrograman web di mana satu event listener dipasang di elemen induk untuk menangani event dari semua elemen anaknya, alih-alih memasang listener di tiap anak. Hasilnya lebih hemat memori dan otomatis bekerja untuk elemen baru yang ditambahkan setelah halaman dimuat.

Apa itu Event Delegation?

Event delegation adalah pola yang memanfaatkan cara event "menggelembung" naik dari elemen anak ke elemen induk di DOM. Daripada memasang satu listener di setiap tombol dalam sebuah daftar, kita cukup memasang satu listener di kontainer daftar tersebut. Teknik ini berjalan di atas event loop browser.

Analoginya seperti resepsionis kantor: alih-alih menempatkan satu petugas di tiap ruangan, satu resepsionis di lobi menangani semua tamu yang masuk lalu mengarahkan mereka.

Kapan Dipakai?

• Daftar atau tabel dengan banyak baris yang butuh interaksi klik.
• Konten dinamis yang elemennya ditambahkan setelah halaman dimuat, listener induk tetap menangkapnya tanpa kode tambahan.
• Optimasi performa, karena satu listener jauh lebih ringan daripada ratusan listener terpisah.

Penjelasan teknis lengkap tersedia di MDN tentang event handling.

Kenapa Penting?

Mengurangi jumlah listener langsung berdampak pada penggunaan memori dan beban main thread. Untuk aplikasi web dengan daftar panjang, seperti katalog produk e-commerce, event delegation membantu menjaga responsivitas dan ikut menekan masalah long task yang bisa memperburuk skor interaksi.

Pertanyaan Umum

Apakah event delegation selalu lebih baik?

Tidak selalu. Untuk elemen tunggal atau jumlah kecil, listener langsung lebih sederhana dan mudah dibaca. Delegation memberi manfaat nyata saat jumlah elemen banyak atau konten sering berubah.

Event apa saja yang bisa didelegasikan?

Sebagian besar event yang menggelembung seperti click dan keydown. Beberapa event seperti focus dan blur tidak menggelembung secara default, jadi butuh penanganan khusus.