Apa itu event delegasi dan mengapa menggunakannya?

Question

Accepted Answer

**Event delegasi** berarti menyertakan **satu** pendengar ke nenek moyang bersama, bukan satu pendengar per anak, dan menggunakan **event bubbling** untuk mengidentifikasi anak mana yang sebenarnya berinteraksi (melalui `event.target`). ```js // ❌ without delegation: one listener PER item (and broken for new items) document.querySelectorAll("li").forEach(li => li.addEventListener("click", handle)); // ✅ with delegation: ONE listener on the parent document.querySelector("ul").addEventListener("click", e => { const li = e.target.closest("li"); // find the clicked item if (li) select(li.dataset.id); }); ``` ## Mengapa ini penting Ketika Anda mengklik `

`, acara **bubble** naik: `li → ul → body → document`. Pendengar di `

` nya, dan `e.target` memberi tahu Anda elemen yang diklik. `closest("li")` berjalan dari target untuk menemukan elemen yang dimaksudkan (menangani klik pada elemen batin juga). ## Mengapa Ini Berharga - **Kinerja/memori**: satu pendengar bukan ratusan atau ribuan. - **Bekerja secara otomatis untuk elemen yang ditambahkan secara dinamis** — `
` baru yang ditambahkan nanti tidak memerlukan pendengar baru, karena induk sudah menanganinya. - **Pembersihan yang lebih sederhana**: hapus satu pendengar, bukan banyak. ## Peringatan Bergantung pada bubbling, jadi tidak bekerja untuk acara yang **tidak bubble** (`focus`, `blur` — gunakan `focusin`/`focusout` sebagai gantinya). Ini adalah teknik yang React gunakan secara internal (satu pendengar akar untuk seluruh aplikasi).

Mengapa ini penting

Mengapa Ini Berharga

Peringatan