Event delegation ni nini na kwa nini kuutumia?

Question

Accepted Answer

**Event delegation** inamaanisha kuambatisha **listener moja tu** kwa mzazi wa kawaida badala ya listener moja kwa kila mtoto, na kutumia **event bubbling** kuchambua ni mtoto gani ambaye alikuwa anaingiliana naye (kupitia `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); }); ``` ## Jinsi inavyofanya kazi Unapobofya `

`, event **bubbles** juu: `li → ul → body → document`. Listener kwenye `

` yoyote ya mtoto wake, na `e.target` inakuambia kipengele halisi kilichobofywa. `closest("li")` inatembea juu kutoka lengo ili kupata kipengele kinachokusudiwa (kuhawili mabofyo kwenye vipengele vya ndani pia). ## Kwa nini ni muhimu - **Utendaji/kumbukumbu**: listener moja badala ya mamia au maelfu. - **Inafanya kazi kiotomatiki kwa vipengele vinavyoongezwa kwa nguvu** — `
` mpya inayoongezwa baadaye haihitaji listener mpya, kwa sababu mzazi tayari inahawili. - **Ukamataji rahisi**: ondoa listener moja, si nyingi. ## Onyo Inaongeza kwa bubbling, kwa hivyo haifanyi kazi kwa matukio ambayo **hayabubbles** (`focus`, `blur` — tumia `focusin`/`focusout` badala yake). Hii ni kanuni halisi React hutumia ndani (listener moja ya nchi kwa app nzima).

Jinsi inavyofanya kazi

Kwa nini ni muhimu

Onyo