इवेंट बबलिंग और कैप्चरिंग: DOM में प्रसार को समझना

इवेंट बबलिंग और कैप्चरिंग HTML DOM एपीआई के भीतर इवेंट प्रसार में महत्वपूर्ण भूमिका निभाते हैं। उनकी कार्यक्षमता को समझने के लिए, आइए इन दो अवधारणाओं की जटिलताओं में उतरें। , और दोनों तत्वों में उस विशेष घटना के लिए पंजीकृत ईवेंट हैंडलर हैं, ईवेंट प्रसार मोड उस क्रम को निर्धारित करता है जिसमें तत्व प्राप्त करते हैं इवेंट।

इवेंट बबलिंग:

इवेंट को शुरू में सबसे आंतरिक तत्व द्वारा कैप्चर किया जाता है और नियंत्रित किया जाता है और फिर उसके मूल तत्वों के लिए बाहर की ओर प्रचारित किया जाता है।

इवेंट कैप्चरिंग:
• घटना को सबसे पहले सबसे बाहरी तत्व द्वारा कैप्चर किया जाता है और उसके नेस्टेड में अंदर की ओर प्रसारित किया जाता है तत्व।
• ट्रिकलिंग बनाम बबलिंग
कैप्चरिंग को "ट्रिकलिंग" के रूप में भी जाना जाता है, एक शब्द जो प्रसार क्रम को याद रखने में मदद करता है: "ट्रिकल डाउन, बबलिंग" ऊपर।"

ब्राउज़र समर्थन

नेटस्केप इवेंट कैप्चरिंग की शुरुआत की, जबकि माइक्रोसॉफ्ट ने इवेंट बबलिंग का समर्थन किया। तंत्र।

प्रदर्शन विचार

• इवेंट कैप्चरिंग की तुलना में जटिल DOM में इवेंट बबलिंग का प्रदर्शन थोड़ा कम हो सकता है।
• उपयोग

हम addEventListener(type) का उपयोग करते हैं , श्रोता, यूज़कैप्चर) इवेंट हैंडलर को बबलिंग (डिफ़ॉल्ट) या कैप्चरिंग मोड में पंजीकृत करने की विधि। कैप्चरिंग मॉडल का उपयोग करने के लिए, तीसरे तर्क को सत्य पर सेट किया जाना चाहिए।

उदाहरण

निम्न HTML संरचना पर विचार करें:

यदि ली तत्व में कोई क्लिक इवेंट होता है:

कैप्चरिंग मोड में, इवेंट को पहले div द्वारा नियंत्रित किया जाता है, उसके बाद ul द्वारा, और अंत में। ली.

बबलिंग मोड में, घटना को पहले ली द्वारा नियंत्रित किया जाता है, फिर उल द्वारा, और अंत में द्वारा नियंत्रित किया जाता है div.

अतिरिक्त संसाधन

• [QuirksMode पर इवेंट ऑर्डर](https://www.quirksmode.org/js/events_order.html )
• [addEventListener चालू एमडीएन](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)

[QuirksMode पर उन्नत इवेंट](https://www.quirksmode.org/ js/events/)

इंटरैक्टिव प्रदर्शन

• निम्न इंटरैक्टिव उदाहरण घटना प्रसार के कैप्चरिंग और बबलिंग चरणों को दर्शाता है:
• var logElement = document.getElementById('log'); फ़ंक्शन लॉग (संदेश) { logElement.innerHTML = ('

  ' संदेश '

  '); } फ़ंक्शन कैप्चर() { लॉग ('कैप्चर:' this.firstChild.nodeValue.trim()); } फ़ंक्शन बबल() { लॉग ('बबल:' this.firstChild.nodeValue.trim()); } var divs = document.getElementsByTagName('div'); के लिए (var i = 0; i किसी भी हाइलाइट किए गए तत्व पर क्लिक करते समय, पहले होने वाले इवेंट कैप्चरिंग चरण को देखें, उसके बाद बबलिंग चरण को देखें।