Apakah delegasi acara dan mengapa menggunakannya?

Question

Accepted Answer

**Event delegation** bermakna melampirkan satu **pendengar tunggal** ke nenek moyang bersama daripada satu pendengar per anak, dan menggunakan **event bubbling** untuk mengenalpasti 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); }); ``` ## Bagaimana ia berfungsi Apabila anda mengklik `

`, acara **bubbles** ke atas: `li → ul → body → document`. Pendengar pada `

` anaknya, dan `e.target` memberitahu anda elemen tepat yang diklik. `closest("li")` berjalan ke atas dari sasaran untuk mencari elemen yang dimaksudkan (mengendalikan klik pada elemen dalaman juga). ## Mengapa ia berharga - **Performance/memory**: satu pendengar daripada ratusan atau ribuan. - **Bekerja secara automatik untuk elemen yang ditambah secara dinamis** — `
` baru yang ditambah kemudian tidak memerlukan pendengar baru, kerana induk sudah menanganinya. - **Pembersihan yang lebih mudah**: keluarkan satu pendengar, bukan banyak. ## Kaveat Ia bergantung pada bubbling, jadi ia tidak berfungsi untuk acara yang **tidak bubbling** (`focus`, `blur` — gunakan `focusin`/`focusout` sebaliknya). Ini adalah teknik yang tepat yang React gunakan secara dalaman (satu root pendengar untuk seluruh apl).

Bagaimana ia berfungsi

Mengapa ia berharga

Kaveat