Hvad er event delegation, og hvorfor bruges det?

Question

Accepted Answer

**Event delegation** betyder at tilknytte en **enkelt** lytter til en fælles forfader i stedet for en lytter per barn, og bruge **event bubbling** til at identificere hvilket barn der faktisk blev interageret 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); }); ``` ## Hvordan det virker Når du klikker på en `

`, **bubler** eventnet op: `li → ul → body → document`. En lytter på `

` børn, og `e.target` fortæller dig det præcise element der blev klikket. `closest("li")` går op fra målet for at finde det tilsigtede element (håndterer også klik på indre elementer). ## Hvorfor det er værdifuldt - **Ydeevne/hukommelse**: en lytter i stedet for hundreder eller tusinder. - **Virker automatisk for dynamisk tilføjede elementer** — en ny `
` tilføjet senere behøver ingen ny lytter, fordi forælderen allerede håndterer det. - **Enklere oprydning**: fjern en lytter, ikke mange. ## Forbehold Det er afhængigt af bubbling, så det virker ikke for events der **ikke bubler** (`focus`, `blur` — brug `focusin`/`focusout` i stedet). Dette er præcis den teknik React bruger internt (en root-lytter for hele appen).

Hvordan det virker

Hvorfor det er værdifuldt

Forbehold