Što je event delegacija i zašto je koristiti?

Question

Accepted Answer

**Event delegacija** znači prikačivanje **jednog** slušatelja zajedničkom pretku umjesto jednog slušatelja po djetetu, i korištenje **event bubblinga** za prepoznavanje kojeg je djeteta zapravo stupilo u interakciju (kroz `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); }); ``` ## Kako funkcionira Kad klikneš na `

`, događaj se **bubla** gore: `li → ul → body → document`. Slušatelj na `

` djece, a `e.target` ti govori točan element koji je kliknut. `closest("li")` hodanja gore od cilja da pronađe namjeravani element (obrađuje i klikove na unutarnjim elementima). ## Zašto je dragocjena - **Performanse/memorija**: jedan slušatelj umjesto stotina ili tisuća. - **Automatski radi za dinamički dodane elemente** — novo `
` dodano kasnije ne trebalo nema novog slušatelja, jer ga roditelj već obrađuje. - **Jednostavnije čišćenje**: uklonite jedan slušatelj, ne mnogo. ## Oprez Ovisit o bubblingu, tako da ne funkcionira za događaje koji **se ne bubljaju** (`focus`, `blur` — umjesto toga koristite `focusin`/`focusout`). Ovo je upravo tehnika koju React koristi interno (jedan root slušatelj za cijelu aplikaciju).

Kako funkcionira

Zašto je dragocjena

Oprez