Event bubbling and delegation In Hindi
जावास्क्रिप्ट प्रोग्रामिंग में इवेंट बबलिंग और इवेंट डेलिगेशन एक इम्पोर्टेन्ट डॉम फंडामेंटल प्रोग्रामिंग कांसेप्ट हैं, जो वेब डेवलपर को डॉम में इवेंट एलिमेंट के डिफ़ॉल्ट स्प्रैडिंग बिहैवियर को कण्ट्रोल और मैनेज करने में हेल्प करती हैं, जिससे की वेब डेवलपर को मौजूदा डॉम में इवेंट रिसोर्सेज को हैंडल करना आसान हो जाता है. स्पेशली, जब वेब डेवलपर के पास कई डॉम एलिमेंट या डायनामिक आर्डर में जनरेट की गई कंटेंट या इनफार्मेशन हो।
Event Bubbling in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में इवेंट बबलिंग डॉम इवेंट के डिफ़ॉल्ट बिहैवियर को इंडीकेट करता है, जिसमे किसी डॉम एलिमेंट में ट्रिगर या एक्सेक्यूट होने वाला इवेंट उसके पैरेंट एलिमेंट तक आटोमेटिक एक्सपैंड या “बबल” हो जाता है। जहा इवेंट बबलिंग पैरेंट डॉम एलिमेंट को चाइल्ड डॉम एलिमेंट के माध्यम से ट्रिगर या एक्सेक्यूट किए गए डॉम इवेंट में रिस्पांस करने में हेल्प करता है। स्पेशली आर्डर में, जब कोई डॉम इवेंट किसी चाइल्ड एलिमेंट में अप्लाई होता है, तो यह पहले उस डॉम एलिमेंट पर हैंडलर को रन करता है, फिर उसके पैरेंट डॉम एलिमेंट तक उसे स्प्रेड या “बबल” कर देता है।
जैसे की, यदि वेब डेवलपर किसी div टैग एलिमेंट के अंदर किसी बटन पर क्लिक करता हैं, तो यह डॉम इवेंट पहले उस एचटीएमएल बटन पर ट्रिगर या एक्सेक्यूट होता है, फिर div तक टैग तक, फिर वेबपेज एलिमेंट बॉडी तक, और अंत में डोम डॉक्यूमेंट तक स्प्रेड या बबल होगा, यह तब तक स्प्रेड होता रहता है, जब तक कि उसे मैन्युअली आर्डर में स्टॉप न किया जाए।
Example of event bubbling in JavaScript.
<div id=”domparent”>
<button id=”domchild”>Press button</button>
</div>
const domparent = document.getElementById(‘domparent’);
const domchild = document.getElementById(‘domchild’);
// here we use Event listener on child dom element
domchild.addEventListener(‘click’, () => {
console.log(‘Button pressed’);
});
// here we use Event listener on parent dom element
domparent.addEventListener(‘click’, () => {
console.log(‘domParent pressed’);
});
यहाँ ऊपर दिए गए डॉम चाइल्ड और पैरेंट में इवेंट बबलिंग एक्शन परफॉर्म होता है, क्योंकि यहाँ क्लिक इवेंट पहले बटन चाइल्ड एलिमेंट में एक्सेक्यूट होता है, उसके बाद यह div पैरेंट डॉम एलिमेंट तक बबल या स्प्रेड होता है।
Stopping Event Bubbling in JavaScript.
जावास्क्रिप्ट प्रोग्रामर इवेंट ऑब्जेक्ट में stopPropagation() मेथड को अप्लाई करके डॉम इवेंट को पैरेंट एलिमेंट तक स्प्रेड या बबल होने से स्टॉप कर सकते हैं। यह फीचर्स तब यूज़फुल होता है, जब प्रोग्रामर केवल किसी पर्टिकुलर स्पेसिफिक डॉम एलिमेंट को इवेंट को हैंडल या मैनेज करना होता हैं, न कि इसमें मौजूद किसी पूर्ववर्ती डॉम एलिमेंट को।
Example of preventing event bubbling in JavaScript.
child.addEventListener(‘click’, (event) => {
console.log(‘Button pressed’);
event.stopPropagation(); // here it used to Stop event from bubbling up action
});
parent.addEventListener(‘click’, () => {
console.log(‘Parent pressed’);
});
यहाँ इस प्रोग्राम में इवेंट प्रिवेंटिंग मेथड में “Parent pressed” मैसेज को लॉग नहीं किया जाता है, क्योंकि यहाँ stopPropagation() मेथड का यूज़ करके डॉम इवेंट को पैरेंट एलिमेंट तक स्प्रेड या बबलिंग अप को स्टॉप करने में किया गया था।
Event capturing in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में डॉम इवेंट कैप्चरिंग या ट्रिकलिंग बबलिंग मेथड के अपोजिट प्रोग्रामिंग कन्सेप्ट है। जहा इवेंट कैप्चरिंग मेथड इवेंट टारगेट डॉम एलिमेंट से रूट तक स्प्रेड या बबलिंग अप होने के बदले डॉम एलिमेंट के रूट से टारगेट एलिमेंट तक नीचे की ओर मूव करता है।
जावास्क्रिप्ट प्रोग्रामर प्रोग्राम में इवेंट लिस्टनेर को ऐड करते समय कैप्चर ऑप्शन इंडीकेट करके कैप्चरिंग मेथड को इनेबल कर सकता हैं.
domparent.addEventListener(‘click’, () => {
console.log(‘Parent pressed (event capturing phase)’);
}, true); // here true property used to enables event capturing
यहाँ इस प्रोग्राम में डिफ़ॉल्ट बिहैवियर इवेंट बबलिंग (phase false) मेथड यूज़ किया गया है, लेकिन यहाँ जब true बिहैवियर को इंडीकेट किया गया है, तो डॉम इवेंट पहले कैप्चर या लोग किया जाता है।
Event Delegation in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में डॉम इवेंट डेलिगेशन एक पॉवरफुल प्रोग्रामिंग कांसेप्ट है, इसमें इवेंट लिस्ट्नेर्स को मल्टीप्ल डॉम एलिमेंट जैसे, कई डॉम बटन या डॉम लिस्ट आइटम से ऐड करने के बदले, जावास्क्रिप्ट वेब डेवलपर एक सिंगल इवेंट लिस्टनेर को पैरेंट डॉम एलिमेंट से ऐड कर सकता हैं। जहा डॉम पैरेंट एलिमेंट पर इवेंट हैंडलर चाइल्ड एलिमेंट से डॉम इवेंट को कैप्चर करता है, जिससे वेब डेवलपर डायनामिक आर्डर में क्रिएट किए गए डॉम एलिमेंट या लार्ज नंबर में इक्वल एलिमेंट के लिए डॉम इवेंट को प्रॉपर एफ्फिसिएंट आर्डर में मैनेज और कण्ट्रोल कर कर सकते है।
Why Use Event Delegation in JavaScript?
- Programming Efficiency – वेब डेवलपर को इंडिविजुअल चाइल्ड डॉम एलिमेंट में एक इवेंट लिस्टनेर को ऐड करने के बदले, वेब डेवलपर पैरेंट डॉम एलिमेंट में एक सिंगल लिस्टनेर को ऐड कर सकते हैं, इस प्रोसेस में इवेंट लिस्टनेर क्वांटिटी कम हो जाती है, और वेब डेवलपमेंट इंटरफ़ेस परफॉरमेंस में इम्प्रोवेंमेंट होता है।
- Dynamically created DOM elements – जब जावास्क्रिप्ट वेबपेज में नए डॉम एलिमेंट डायनामिक आर्डर में ऐड किया जाता है, तो यहाँ ईवेंट डेलिगेशन फीचर्स यह तय करता है कि पैरेंट लिस्टनेर, लिस्ट्नेर्स को पुनः ग्रुप किए बिना, इन नए डॉम एलिमेंट के लिए ईवेंट को हैंडल और मैनेज करता है।
How event delegation works in JavaScript.
जब किसी प्रोग्राम में चाइल्ड डॉम एलिमेंट पर कोई इवेंट ट्रिगर होता है, तो वह पैरेंट डॉम एलिमेंट तक एक्सेस हो जाता है, और यह पैरेंट डॉम एलिमेंट में टेस्टिंग करता है कि मौजूदा इवेंट का टारगेट उन चाइल्ड एलिमेंट्स से मिलता या जुलता है या नहीं जिन्हें इवेंट में हैंडल या मैनेज करना है।
जैसे की, वेब डेवलपर के पास लिस्ट आइटम्स की लिस्ट है, तो वेब डेवलपर उन पैरेंट डॉम एलिमेंट <ul> लिस्ट में एक क्लिक इवेंट लिसनर को ऐड कर सकते हैं, और जब डेवलपर किसी लिस्ट आइटम (<li>) में क्लिक करता है, तो <ul> टैग में मौजूद इवेंट लिसनर उसे कैच कर लेता है।
Example of event delegation in JavaScript.
<ul id=”list”>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
<li>element 4 </li>
</ul>
// here we Select the parent <ul> tag element
const listitem = document.getElementById(‘list’);
// here we Add an event listener on the parent dom element
listitem.addEventListener(‘click’, (event) => {
// here it Check if the click element is an <li> item group
if (event.target.tagName === ‘LI’) {
console.log(`Item pressed: ${event.target.textContent}`);
}
});
यहाँ इस लिस्ट ग्रुप आइटम में, “एलिमेंट 2” या “एलिमेंट 3” पर क्लिक करने से रिलेटेड आइटम में लॉग हो जाता है।
यहाँ लिस्ट तब भी काम करेगा, जब नए लिस्ट एलिमेंट <ul> में डायनामिक आर्डर में ऐड किए जाते हैं, क्योंकि यहाँ इवेंट पैरेंट <ul> टैग के द्वारा कैच किया जाता है, और event.target मेथड क्लिक किया गया चाइल्ड डॉम एलिमेंट को टेस्ट कर सकता है।
Adding new elements dynamically in JavaScript.
जैसे की, यदि वेब डेवलपर एक नया <li> टैग डॉम एलिमेंट डायनामिक आर्डर में ऐड करता हैं, तो पैरेंट <ul> टैग में इवेंट लिस्टनेर अभी भी काम कर रहा है.
const newItem = document.createElement(‘li’);
newItem.textContent = ‘element 5’;
list.appendChild(newItem);
यहाँ इस प्रोग्राम में, “element 5” पर क्लिक करने से पैरेंट एलिमेंट के लिए इवेंट लिस्टनेर भी एक्सेक्यूट हो जाता है।
Benefits of using event delegation in JavaScript.
- Reduced memory usage – जावास्क्रिप्ट प्रोग्राम में इंडिविजुअल चाइल्ड डॉम एलिमेंट के लिए कई लिस्टनेर के बदले पैरेंट डॉम एलिमेंट में एक इवेंट लिस्टनेर ग्रुप करके वेब डेवलपर मेमोरी यूज़ को कम करता हैं, और इसके परफॉरमेंस में इम्प्रोवेंमेंट करता हैं।
- Easier maintenance – वेब डेवलपर को इंडिविजुअल नए डॉम चाइल्ड एलिमेंट के लिए इवेंट लिस्टनेर को ऐड करने की जरूरत नहीं है। जब तक इवेंट टारगेट किसी सलेक्टर जैसे, li लिस्ट टैग से मिलता जुलता है, यहाँ इवेंट लिस्टनेर इसे मैनेज कर लेता है।
- Handling dynamically added elements – इवेंट डेलिगेशन गतिशील रूप से जोड़े गए डॉम एलिमेंट्स के लिए काम करता है, इसलिए प्रोग्रामर को इंडिविजुअल नए एलिमेंट के बनने के बाद लिस्टनेर कोग्रुप करने की जरूरत नहीं है।
Summary of event bubbling and event delegation in JavaScript.
- Event bubbling – जावास्क्रिप्ट प्रोग्रामिंग में चाइल्ड डॉम एलिमेंट्स पर एक्सेक्यूट किए गए इवेंट पैरेंट डॉम एलिमेंट्स तक स्प्रेड या बबल होते हैं। यह इवेंट बबलिंग का डिफ़ॉल्ट बिहैवियर है, और वेब डेवलपर इसे stopPropagation() मेथड से स्टॉप कर सकते हैं।
- Event Capturing – जावास्क्रिप्ट प्रोग्रामिंग में इवेंट बबलिंग के अपोजिट इवेंट कैप्चरिंग है, जहाँ यह इवेंट रूट से टारगेट एलिमेंट तक स्प्रेड होता हैं। इसे कैप्चर ऑप्शन से इनेबल किया जा सकता है।
- Event Delegation – जावास्क्रिप्ट प्रोग्रामिंग में यह एक फीचर्स है, जिसमें पैरेंट डॉम एलिमेंट अपने चाइल्ड डॉम एलिमेंट में एक्सेक्यूट होने वाले इवेंट्स को लिस्टनेर करता है। यह एक एफ्फिसिएंट मेथड है, और डायनामिक आर्डर में किए गए डॉम एलिमेंट्स के लिए काम करता है।
- Benefits of Event Delegation – जावास्क्रिप्ट प्रोग्रामिंग में इवेंट लिस्टनेर की क्वांटिटी को कम करता है, सिस्टम परफॉरमेंस में इम्प्रोवेंमेंट करता है, और डायनामिक आर्डर में क्रिएट किए गए डॉम एलिमेंट्स को कण्ट्रोल और मैनेज करना सरल करता है।
