event delegation అంటే ఏమిటి మరియు దాన్ని ఎందుకు ఉపయోగించాలి?

Question

Accepted Answer

**Event delegation** అంటే ప్రతి బిడ్డకు ఒక listener ను అటాచ్ చేసే బదులుగా, సాధారణ పూర్వీకుడికి **ఒక్క** listener ను అటాచ్ చేయడం, మరియు **event bubbling** ను ఉపయోగించి ఏ బిడ్డ నిజానికి ఆపరేట్ చేయబడిందో గుర్తించడం (via `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); }); ``` ## ఇది ఎలా పనిచేస్తుంది మీరు `

` ను క్లిక్ చేసినప్పుడు, ఈవెంట్ **bubbles** పైకి: `li → ul → body → document`. `

` చిల్డ్రెన్ నుండి క్లిక్‌లను స్వీకరిస్తుంది, మరియు `e.target` మీకు ఏ ఖచ్చితమైన ఎలిమెంట్ క్లిక్ చేయబడిందో చెబుతుంది. `closest("li")` లక్ష్యం నుండి పైకి నడిచి ఉద్దేశించిన ఎలిమెంట్ను కనుగొనండి (అంతర్గత ఎలిమెంట్‌ల క్లిక్‌లను కూడా సంభవిస్తుంది). ## ఇది ఎందుకు విలువైనది - **పనితీరు/మెమరీ**: వందల లేదా వేల సంখ్యల స్థానంలో ఒక listener. - **డైనమిక్‌గా జోడించిన ఎలిమెంట్‌ల కోసం స్వయంచాలకంగా పనిచేస్తుంది** — తరువాత జోడించిన కొత్త `
` కు కొత్త listener అవసరం లేదు, ఎందుకంటే పెరెంట్ ఇప్పటికే దానిని నిర్వహిస్తుంది. - **సరళ శుభ్రతకు**: ఒక listener ను తీసివేయండి, చాలా కాదు. ## హెచ్చరిక ఇది bubbling పై ఆధారపడి ఉంటుంది, కాబట్టి **bubble చేయని** ఈవెంట్‌ల కోసం పనిచేయదు (`focus`, `blur` — `focusin`/`focusout` ఉపయోగించండి). ఇది React అంతర్గతంగా ఉపయోగించే సరిగ్గా ఆ సాంకేతికత (మొత్తం యాప్ కోసం ఒక రూట్ listener).

ఇది ఎలా పనిచేస్తుంది

ఇది ఎందుకు విలువైనది

హెచ్చరిక