Cad is deacúchaint imeall ann agus cén fáth a úsáid sé?

Question

Accepted Answer

**Event delegation** (deacúchaint imeall) a chiallaíonn a bheith ag ceangal **aonad** éisteachta go fréamhdhúil coiteann in ionad éisteachta amháin do gach leanbh, agus **event bubbling** a úsáid chun a aithint cé an leanbh a bhí i gceist go fírinne (trí `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); }); ``` ## Conas a oibríonn sé Nuair a chlicar tú ar `

`, bíonn an imeall ag foluain suas: `li → ul → body → document`. Fáiltíonn éisteachta ar `

`, agus is féidir le `e.target` a rá duit an ghné bhocht a cliceadh. Siúlann `closest("li")` suas ón sprioc chun an eilimint bhreithnithe a fháil (láimhseálann sé cliceanna ar eilimintí inmheánacha chomh maith). ## Cén fáth go bhfuil sé luachmhar - **Feidhmíochta/cuimhne**: éisteachta amháin in ionad na céadta nó na míle. - **Oibríonn sé d'eilimintí a cuireadh leis go dinimiciúil go huathoibríoch** — níl aon éisteachta nua ag teastáil ó `
` nua a cuireadh leis níos déanaí, toisc go bhfuil an tuismitheoir a bheirirt cheana féin. - **Glantachán níos simplí**: bain éisteachta amháin, nach iomaí. ## Rabhadh Braithann sé ar bhubbling, mar sin ní oibríonn sé d'imealla nach **bubble** (`focus`, `blur` — úsáid `focusin`/`focusout` ina áit). Is é seo an teicníc a úsáideann React go hinmheánach (éisteachta amháin fréimhe don bhith ar fad).

Conas a oibríonn sé

Cén fáth go bhfuil sé luachmhar

Rabhadh