इवेंट डेलीगेशन पैटर्न
एक पैरेंट श्रोता से कई चाइल्ड इवेंट संभालिए।
इवेंट डेलीगेशन पैटर्न, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
सबके लिए एक ही श्रोता
इवेंट प्रतिनिधिकरण का अर्थ है, अलग-अलग वंशजों पर कई श्रोता लगाने के बजाय किसी साझा पूर्वज तत्व पर एक ही श्रोता लगाना। इवेंट बबल होते हैं, इसलिए अभिभावक तत्व अपने सभी वंशजों से आने वाले क्लिक प्राप्त करता है।
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>भोला तरीका
प्रतिनिधिकरण के बिना आपको हर आइटम पर चक्र चलाकर एक हैंडलर लगाना पड़ता। यह व्यर्थ है: इसमें अधिक स्मृति लगती है और बाद में जोड़े गए तत्वों के लिए यह काम नहीं करता।
document.querySelectorAll("#menu li").forEach((li) => {
li.addEventListener("click", () => console.log(li.textContent));
});प्रतिनिधिकृत तरीका
इसके बजाय, अभिभावक तत्व पर एक श्रोता लगाएँ और event.target की जाँच करके पता लगाएँ कि किस वंशज पर क्लिक किया गया था।
const menu = document.getElementById("menu");
menu.addEventListener("click", (e) => {
console.log(e.target.textContent);
});सही लक्ष्य से मिलान करना
क्लिक किसी नेस्ट किए गए तत्व पर हो सकता है। अपने चयनकर्ता से मेल खाने वाले संबंधित पूर्वज तत्व को ऊपर की ओर खोजने के लिए event.target.closest(selector) का उपयोग करें।
menu.addEventListener("click", (e) => {
const item = e.target.closest("li");
if (!item) return; // clicked outside any li
console.log("Clicked:", item.textContent);
});जाँच के साथ सुरक्षा करना
ऐसे क्लिक से हमेशा सुरक्षा करें जो मेल नहीं खाते। if (!item) return; का शुरुआती निकास आपके हैंडलर को तब क्रैश होने से बचाता है, जब उपयोगकर्ता कंटेनर के अंदर पैडिंग या खाली जगह पर क्लिक करता है।
menu.addEventListener("click", (e) => {
const item = e.target.closest("li");
if (!item || !menu.contains(item)) return;
handleSelect(item);
});डेटा गुणधर्मों का उपयोग करना
एक सामान्य तरीके में हर आइटम पर data-* गुणधर्म के माध्यम से कोई पहचानकर्ता या कार्रवाई रखी जाती है। प्रतिनिधिकृत हैंडलर उसे मेल खाए हुए तत्व से पढ़ता है।
menu.addEventListener("click", (e) => {
const item = e.target.closest("li");
if (!item) return;
const id = item.dataset.id; // reads data-id
console.log("Selected id:", id);
});कार्रवाई के अनुसार भेजना
कई बटनों वाले टूलबार के लिए हर बटन को एक data-action दें और उसके आधार पर विकल्प चुनें। एक ही श्रोता हर बटन को संभालता है।
toolbar.addEventListener("click", (e) => {
const btn = e.target.closest("button");
if (!btn) return;
switch (btn.dataset.action) {
case "save": save(); break;
case "delete": remove(); break;
}
});यह बड़े स्तर पर क्यों काम करता है
प्रतिनिधिकरण के साथ 1000 row वाली सूची के लिए 1000 श्रोताओं के बजाय केवल एक श्रोता चाहिए। इससे कम स्मृति लगती है, सेटअप तेज़ होता है और row बदलने पर सफ़ाई का चक्र चलाने की आवश्यकता नहीं पड़ती।
प्रदर्शन संबंधी टिप्पणी
प्रतिनिधिकरण की एक छोटी-सी लागत भी है: हर मेल खाने वाला इवेंट आपके हैंडलर को चलाता है, जो फिर उसकी छँटाई करता है। अधिकांश ऐप में बचत की तुलना में यह लागत नगण्य होती है, लेकिन mousemove जैसे बहुत अधिक आवृत्ति वाले इवेंट के लिए document पर प्रतिनिधिकृत श्रोता लगाने से बचें।
कंटेनर चुनना
ऐसा निकटतम स्थिर पूर्वज तत्व चुनें जिसमें सभी लक्ष्य शामिल हों। किसी सघन कंटेनर (स्वयं सूची) को प्रतिनिधि बनाना document को प्रतिनिधि बनाने से बेहतर है, क्योंकि इससे कम असंबंधित इवेंट आपका हैंडलर चलाते हैं।
const list = document.querySelector(".task-list");
list.addEventListener("click", onTaskClick);closest के साथ संयोजन
closest() प्रतिनिधिकरण का मुख्य आधार है। यदि तत्व स्वयं मेल खाता हो तो यह उसी तत्व को लौटाता है; अन्यथा निकटतम मेल खाने वाला पूर्वज तत्व लौटाता है, और ऐसा भी न होने पर null लौटाता है। इससे नेस्ट किए गए मार्कअप पर प्रतिनिधिकरण सुरक्षित हो जाता है।
const cell = e.target.closest("td[data-col]");
if (cell) console.log(cell.dataset.col);त्वरित जाँच
इवेंट प्रतिनिधिकरण का उपयोग क्यों करें?
पुनरावलोकन
इवेंट प्रतिनिधिकरण किसी अभिभावक तत्व पर एक श्रोता लगाता है और सभी वंशजों को संभालने के लिए बबलिंग का उपयोग करता है। संबंधित तत्व खोजने के लिए e.target.closest(selector) का उपयोग करें, शुरुआती वापसी से सुरक्षा करें और कार्रवाइयाँ भेजने के लिए data-* गुणधर्म पढ़ें। यह बहुत बड़ी सूचियों के लिए भी अच्छी तरह काम करता है और गतिशील यूआई के लिए मानक तरीका है।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 59
- पाठ
- 200
अक्सर पूछे जाने वाले प्रश्न
क्या “इवेंट डेलीगेशन पैटर्न” पाठ निःशुल्क है?
हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “इवेंट डेलीगेशन पैटर्न” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“इवेंट डेलीगेशन पैटर्न” में मैं क्या सीखूँगा?
एक पैरेंट श्रोता से कई चाइल्ड इवेंट संभालिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“इवेंट डेलीगेशन पैटर्न” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- कैप्चर और बबल चरण
- इवेंट डेलीगेशन पैटर्न
- डेलीगेशन के साथ गतिशील सूचियाँ
- कस्टम इवेंट