Çfarë është event delegation dhe pse ta përdorim atë?

Question

Accepted Answer

**Event delegation** nënkupton bashkimin e një **të vetme** dëgjuesi në një paraardhës të përbashkët në vend të një dëgjuesi për secilin fëmijë, dhe përdorimit të **event bubbling** për të identifikuar se cili fëmijë u ndërveprua përfundimisht (përmes `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); }); ``` ## Si funksionon Kur klikoni në `

`, ngjarja **lëviz lart**: `li → ul → body → document`. Një dëgjues në `

`, dhe `e.target` ju tregon saktësisht se cili element u klik. `closest("li")` lëviz lart nga përqëndruesi për të gjetur elementin e synuar (gjithashtu trajton klikimet në elementet e brendshme). ## Pse është i vlefshëm - **Performanca/memoria**: një dëgjues në vend të qindrave ose mijërave. - **Funksionon automatikisht për elementet e shtuar dinamikisht** — një `
` i ri i shtuar më vonë nuk ka nevojë për një dëgjues të ri, sepse prindi tashmë e trajton atë. - **Pastrimi më i thjeshtë**: hiqni një dëgjues, jo shumë. ## Paralajmërim Bazohet në lëvizjen lart, prandaj nuk funksionon për ngjarjet që **nuk lëvizin lart** (`focus`, `blur` — përdorni `focusin`/`focusout` në vend të kësaj). Kjo është pikërisht teknika që React përdor në mënyrë të brendshme (një dëgjues rrënjë për të gjithë aplikacionin).

Si funksionon

Pse është i vlefshëm

Paralajmërim