Co je event delegation a proč se používá?

Question

Accepted Answer

**Event delegation** znamená připojit **jeden** listener na společný předka místo jednoho listeneru na každé dítě a pomocí **event bubblingu** identifikovat, které dítě bylo ve skutečnosti interagováno (přes `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); }); ``` ## Jak to funguje Když kliknete na `

`, ereignost **bublinuje** nahoru: `li → ul → body → document`. Listener na `

` potomků a `e.target` vám řekne přesný prvek, na který bylo kliknuto. `closest("li")` prochází vzhůru od cíle, aby našel zamýšlený prvek (zpracovává také kliknutí na vnitřní prvky). ## Proč je to cenné - **Výkon/paměť**: jeden listener místo stovek nebo tisíců. - **Funguje automaticky pro dynamicky přidané prvky** — nové `
` přidané později nepotřebuje nový listener, protože jej rodič již zpracovává. - **Jednodušší čištění**: odebrat jeden listener, ne mnoho. ## Upozornění Opírá se o bubbling, takže nefunguje pro ereignosti, které **nebublinují** (`focus`, `blur` — místo toho použijte `focusin`/`focusout`). Toto je přesně technika, kterou React používá interně (jeden root listener pro celou aplikaci).

Jak to funguje

Proč je to cenné

Upozornění