Kas yra įvykio delegavimas ir kodėl jį naudoti?

Question

Accepted Answer

**Event delegation** reiškia **vieno** klausytojo prijungimą prie bendro protėvio, o ne vieno klausytojo vienam vaikui, ir naudojimąsi **event bubbling**, kad nustatyti, kuris vaikas iš tikrųjų buvo sąveikaujamas (per `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); }); ``` ## Kaip tai veikia Kai spustelite `

`, įvykis **burbulėja** aukštyn: `li → ul → body → document`. Klausytojas ties `

` vaikų, o `e.target` jums pasakys tikslų spustelėtą elementą. `closest("li")` eina aukštyn nuo tikslo, kad surastų numatomą elementą (taip pat tvarko spustelėjimus vidiniais elementais). ## Kodėl tai vertinga - **Performance/memory**: vienas klausytojas, o ne šimtai ar tūkstančiai. - **Automatiškai veikia dinamiškai pridėtiems elementams** — naujas `
`, pridėtas vėliau, nereikalauja naujo klausytojo, nes protėvis jau jį tvarko. - **Paprastesnis uždarymas**: pašalinkite vieną klausytoją, o ne daugelį. ## Įspėjimas Jis remiasi burbuliavimu, todėl neveikia įvykiams, kurie **neburbulėja** (`focus`, `blur` — vietoje to naudokite `focusin`/`focusout`). Tai yra tiksliai ta technika, kurią React naudoja viduje (vienas root klausytojas visai programėlei).

Kaip tai veikia

Kodėl tai vertinga

Įspėjimas