ईवेंट डेलीगेशन क्या है और इसका उपयोग क्यों करें?

Question

Accepted Answer

**Event delegation** का अर्थ है कि **एक ही** सुनने वाले को सामान्य पूर्वज से जोड़ना, न कि प्रत्येक बच्चे के लिए एक सुनने वाला, और **event bubbling** का उपयोग करके यह पहचानना कि किस बच्चे के साथ वास्तव में इंटरैक्ट किया गया (`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); }); ``` ## यह कैसे काम करता है जब आप `

` पर क्लिक करते हैं, तो ईवेंट **ऊपर की ओर बुलबुले** बनाता है: `li → ul → body → document`। `

` बच्चे से क्लिक प्राप्त करता है, और `e.target` आपको बताता है कि कौन सा तत्व क्लिक किया गया। `closest("li")` लक्ष्य से ऊपर की ओर चलता है इच्छित तत्व को खोजने के लिए (आंतरिक तत्वों पर क्लिक को भी संभालता है)। ## यह क्यों मूल्यवान है - **प्रदर्शन/स्मृति**: सैकड़ों या हजारों की बजाय एक सुनने वाला। - **गतिशील रूप से जोड़े गए तत्वों के लिए स्वचालित रूप से काम करता है** — बाद में जोड़ा गया नया `
` को कोई नया सुनने वाला नहीं चाहिए, क्योंकि माता-पिता पहले से ही इसे संभाल रहे हैं। - **सरल सफाई**: एक सुनने वाले को हटाएं, कई को नहीं। ## चेतावनी यह बुलबुले पर निर्भर करता है, इसलिए यह उन ईवेंट के लिए काम नहीं करता है जो **बुलबुले नहीं बनाते** (`focus`, `blur` — इसके बजाय `focusin`/`focusout` का उपयोग करें)। यह बिल्कुल वह तकनीक है जो React आंतरिक रूप से उपयोग करता है (पूरे ऐप के लिए एक रूट सुनने वाला)।

यह कैसे काम करता है

यह क्यों मूल्यवान है

चेतावनी