Hva er event delegation og hvorfor bruker man det?

Question

Accepted Answer

**Event delegation** betyr å feste en **enkelt** lytter til en felles stamfar i stedet for én lytter per barn, og bruke **event bubbling** til å identifisere hvilket barn som faktisk ble samhandlet 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 fungerer Når du klikker på en `

`, bobbler eventen opp: `li → ul → body → document`. En lytter på `

`-barn, og `e.target` forteller deg nøyaktig hvilket element som ble klikket. `closest("li")` går opp fra målet for å finne det tiltenkte elementet (håndterer også klikk på indre elementer). ## Hvorfor det er verdifullt - **Ytelse/minne**: én lytter i stedet for hundrevis eller tusenvis. - **Fungerer automatisk for dynamisk tilføyde elementer** — en ny `
` som legges til senere trenger ingen ny lytter, fordi stamfaren allerede håndterer det. - **Enklere opprydding**: fjern én lytter, ikke mange. ## Forbehold Det er avhengig av bubbling, så det fungerer ikke for hendelser som **ikke bobbler** (`focus`, `blur` — bruk `focusin`/`focusout` i stedet). Dette er nøyaktig teknikken React bruker internt (én rotlytter for hele appen).

Hvordan det fungerer

Hvorfor det er verdifullt

Forbehold