Vad är event delegation och varför använda det?

Question

Accepted Answer

**Event delegation** innebär att man lägger till en **enda** lyssnare på en gemensam förälder istället för en lyssnare per barn, och använder **event bubbling** för att identifiera vilket barn som faktiskt interagerades med (via `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); }); ``` ## Hur det fungerar När du klickar på en `

`, **bubblar** eventen upp: `li → ul → body → document`. En lyssnare på `

`-barn, och `e.target` talar om för dig vilket exakt element som klickades. `closest("li")` går upp från målet för att hitta det avsedda elementet (hanterar även klick på inre element). ## Varför det är värdefullt - **Prestanda/minne**: en lyssnare istället för hundratals eller tusentals. - **Fungerar automatiskt för dynamiskt tillagda element** — en ny `
` som läggs till senare behöver ingen ny lyssnare, eftersom föräldern redan hanterar det. - **Enklare rensning**: ta bort en lyssnare, inte många. ## Varning Det förlitar sig på bubbling, så det fungerar inte för event som **inte bubblerar** (`focus`, `blur` — använd `focusin`/`focusout` istället). Detta är exakt den teknik React använder internt (en rotlyssnare för hela appen).

Hur det fungerar

Varför det är värdefullt

Varning