Mitä on tapahtumien delegointi ja miksi sitä käytetään?

Question

Accepted Answer

**Tapahtumien delegointi** tarkoittaa yhden **yhteisen** kuuntelijan liittämistä yläelementtiin kaikkien alielementtien kuuntelijoiden sijaan, ja käytetään **tapahtumien kuplautumista** sen tunnistamiseen, kumpaa alielementtiä todellisuudessa käsiteltiin (käyttäen `event.target`-ominaisuutta). ```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); }); ``` ## Miten se toimii Kun napsautat `

`-elementtiä, tapahtuma **kuplautuu** ylöspäin: `li → ul → body → document`. Kuuntelija `

`-alifunktioista tulevat napsautukset, ja `e.target` kertoo sinulle tarkalleen, mikä elementti napsautettiin. `closest("li")` kävelee kohteesta alkaen ylöspäin löytääkseen tarkoitetun elementin (käsittelee myös klikkejä sisäelementeillä). ## Miksi se on arvokas - **Suorituskyky/muisti**: yksi kuuntelija sadojen tai tuhansien sijaan. - **Toimii automaattisesti dynaamisesti lisätyille elementeille** — myöhemmin lisätty uusi `
` ei tarvitse uutta kuuntelijaa, koska yläelementti käsittelee sen jo. - **Yksinkertaisempi puhdistus**: poista yksi kuuntelija, ei monia. ## Varoitus Se perustuu kuplautumiseen, joten se ei toimi tapahtumille, jotka **eivät kuplauta** (`focus`, `blur` — käytä sen sijaan `focusin`/`focusout`). Tämä on tasan se tekniikka, jota React käyttää sisäisesti (yksi juurikuuntelija koko sovellukselle).

Miten se toimii

Miksi se on arvokas

Varoitus