X'inhu delegazzjoni tal-avvenimenti u għalfejn tuğħha?

Question

Accepted Answer

**Event delegation** tfisser li tmillik **listener wieħed** għal ximgħa komuni minflok listener wieħed għal kull tifel, u tuğħ **event bubbling** biex tidentifika liema tifel kien attwalment interattiv (permezz ta' `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); }); ``` ## Kif jaħdem Meta tkun iffokat fuq `

`, l-avveniment **bubbles** up: `li → ul → body → document`. Listener fuq `

` iben tiegħu, u `e.target` jgħidlek l-element eżatt li tkun ffokat. `closest("li")` jimxi l-fuq mit-target biex isib l-element meqjus (tiwitti wkoll klikkiet fuq elementi ta' ġewwa). ## Għalfejn huwa valwuż - **Performance/memory**: listener wieħed minflok miet jew elf. - **Jaħdem awtomatikament għal elementi miżjuda b'mod dinamiku** — `
` ġdid miżjud aktar tard ma jkollux bżonn listener ġdid, għax il-ġenitur diġà jkun qed jittih. - **Tnaddif aktar semplic**: neħħi listener wieħed, mhux ħafna. ## Avvertenza Jiddependi fuq bubbling, allura ma jaħdimx għal avvenimenti li **ma jeċċ bubbling** (`focus`, `blur` — uża `focusin`/`focusout` minflok). Din hija eżattament it-teknika li React tuğħ internament (listener root wieħed għall-app sħiħ).

Kif jaħdem

Għalfejn huwa valwuż

Avvertenza