ईवेंट बबलिंग और ईवेंट कैप्चरिंग इन जावास्क्रिप्ट: आप सभी को जानना आवश्यक है



यह ब्लॉग जावास्क्रिप्ट में ईवेंट बबलिंग और ईवेंट कैप्चरिंग के बारे में गहराई से ज्ञान प्रदान करेगा। यह दोनों के काम करने और उपयोग का विवरण प्रदान करेगा।

ईवेंट प्रवाह के समय जावास्क्रिप्ट में ईवेंट बब्बलिंग और ईवेंट कैप्चरिंग सबसे अधिक उपयोग किए जाने वाले शब्द हैं। ये HTML DOM API में इवेंट प्रोपगेशन के दो तरीके हैं। जावास्क्रिप्ट में इवेंट बब्बलिंग और इवेंट कैप्चरिंग पर यह लेख विस्तार से वर्णन करेगा कि हमें इनकी आवश्यकता क्यों है निम्नलिखित क्रम में:

जावास्क्रिप्ट में ईवेंट बबलिंग क्या है?

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





ईवेंट बबलिंग - ईवेंट बब्लिंग और ईवेंट कैप्चरिंग इन जावास्क्रिप्ट- edureka

ईवेंट बबलिंग जावास्क्रिप्ट में ईवेंट हैंडलिंग का एक छोटा सा हिस्सा है। इसे बेहतर ढंग से समझने के लिए हमें Event Propagation के बारे में जानना होगा और यह Event Bubbling का समर्थन कैसे करता है।



दशमलव जावा कोड के लिए द्विआधारी

घटना प्रसार क्या है?

ईवेंट प्रचार की तुलना इवेंट बबलिंग और उसके बच्चे के रूप में कैप्चर करने के साथ मूल शब्द के रूप में की जा सकती है।इसे निम्नानुसार दर्शाया गया है:

 

यदि आप किसी भी छवि पर क्लिक करते हैं तो यह न केवल एक क्लिक ईवेंट उत्पन्न करेगा बल्कि यह अभिभावक 'ए' और दादा 'ली' पर जाता है। इस तरह से कार्य का प्रसार होता है। यहां छवि को बच्चे के रूप में माना जाता है और यह घटना का लक्ष्य है जहां क्लिक उत्पन्न होता है। अपने पूर्वजों के साथ छवि एक पेड़ शब्दावली में शाखा बनाती है। शाखा महत्वपूर्ण है क्योंकि हम उस मार्ग को जानते हैं जिसके साथ घटना प्रचार करती है।



श्रोताओं में से प्रत्येक को क्रमशः एक घटना वस्तु के साथ बुलाया जाता है जो घटना के बारे में जानकारी इकट्ठा करता है। यह प्रचार बहुत महत्वपूर्ण है क्योंकि हम दिए गए कार्यक्रम के लिए सभी श्रोताओं को बुलाने की प्रक्रिया को जानते हैं। ऊपर की तस्वीर से हम देख सकते हैं कि शाखा का निर्धारण स्थिर है। घटना के दौरान होने वाले किसी भी पेड़ संशोधनों की अनदेखी की जाती है। यहां प्रचार द्विदिश है कि यह खिड़की से घटना के लक्ष्य तक जाता है और वापस हो जाता है। यहाँ प्रसार को मोटे तौर पर तीन मुख्य प्रकारों में वर्गीकृत किया गया है। वो है:

  1. कब्जा चरण: विंडो से ईवेंट लक्ष्य चरण तक जा रहा है।
  2. लक्ष्य चरण: यह लक्ष्य का चरण है।
  3. बबल चरण: घटना लक्ष्य माता-पिता से वापस खिड़की पर।

ईवेंट कैप्चरिंग क्या है?

इस चरण में, कैप्टन श्रोताओं को बुलाया जाता है, जिनके मूल्य को 'सत्य' के रूप में पंजीकृत किया गया है। यह इस प्रकार है:

el.addEventListener ('क्लिक', श्रोता, सच)

यहां श्रोता मूल्य को 'सत्य' के रूप में पंजीकृत किया गया है, इसलिए इस घटना को कैप्चर किया जा रहा है। यदि कोई मूल्य नहीं था, तो डिफ़ॉल्ट रूप से मान गलत था और ईवेंट को कैप्चर नहीं किया जाएगा। तो इस चरण में वह घटना जिसका मूल्य सत्य है, केवल खिड़की से अपना रास्ता ढूंढती है और बुलाती है और कब्जा कर लिया जाता है।

फिर घटना लक्ष्य चरण में, पंजीकृत सभी श्रोताओं को उनके ध्वज की स्थिति की परवाह किए बिना कहा जाता है जो कि सही या गलत है।

जावास्क्रिप्ट में ईवेंट बबलिंग और ईवेंट कैप्चरिंग का उपयोग

बबलिंग चरण में, केवल गैर-कैप्टन को कहा जाता है, यह ऐसी घटनाएं हैं जिनका ध्वज मूल्य 'गलत' है। DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) शब्दावली में इवेंट बबलिंग और इवेंट कैप्चरिंग बहुत उपयोगी और महत्वपूर्ण हैं।

el.addEventListener ('क्लिक', श्रोता, असत्य) // श्रोता el कैप्चर नहीं करता। aldadventventListener ('क्लिक', श्रोता) // श्रोता कैप्चर नहीं करता है

ऊपर दिए गए कोड ऑफ बबलिंग और कैप्चरिंग चरण का काम दिखाता है। सभी इवेंट इवेंट टारगेट पर नहीं जाते हैं। उनमें से कुछ बुदबुदाए नहीं। लक्ष्य चरण के बाद उनकी यात्रा रुक जाती है। तीन घटना चरण प्रवाह निम्न चित्र में चित्रित किया गया है:

ईवेंट बबलिंग सभी प्रकार के ईवेंट में काम नहीं करता है, हालांकि, श्रोता के पास होना चाहिए '।बुलबुला घटना की वस्तु की बूलियन संपत्ति। कुछ अन्य गुणों में शामिल हैं:

c ++ में सॉर्ट फ़ंक्शन
  1. e। लक्ष्य: वह घटना लक्ष्य का संदर्भ देता है।
  2. e.currentTarget: यह वह मोड है जिस पर वर्तमान श्रोता पंजीकृत हैं। यहां मान का उपयोग करके संदर्भित किया जाता है यह कीवर्ड।
  3. e.ventPhase: यह एक पूर्णांक है जो अन्य तीन कीवर्ड को संदर्भित करता है जैसे कि कैप्चरिंग_पेज़, बुब्लिंग_पेज़, AT_Target चरण।

कार्य पद्धति

आइए हम उपरोक्त दृष्टांत के बारे में जानकारी लें। हमें 'बटन' तत्व पर क्लिक करें और फिर तुरंत एक घटना शुरू होने वाली है। आम तौर पर एक घटना जड़ से अपनी यात्रा शुरू करती है जो पेड़ का सबसे ऊपरी तत्व है। फिर यह पेड़ को लक्ष्य घटना के बाद चला जाता है जो 'बटन' है। यहां बताया गया है कि यह कैसे यात्रा करता है:

जैसा कि चित्र में दिखाया गया है कि घटना अंत में लक्ष्य घटना तक पहुंचने वाली DOM शब्दावली के माध्यम से अपना रास्ता बनाती है। अब एक बार जब यह घटना अपने लक्ष्य पर पहुँच जाती है तो यह समाप्त नहीं होती है। यह नीचे दी गई तस्वीर में सचित्र के रूप में DOM शब्दावली के भीतर और आगे बढ़ता है।

पहले की तरह, घटना के पथ के साथ प्रत्येक तत्व जो आगे बढ़ रहा है, उसके अस्तित्व के बारे में सूचित हो जाता है। जैसा कि यह इस तरह से चल रहा है आप सोच रहे होंगे कि क्या हम इस प्रक्रिया को रोक सकते हैं या नहीं। खैर, सवाल का जवाब हां हम घटना के प्रचार को रोक सकते हैं। यह आह्वान करके किया जाता है 'StopPropagation' घटना वस्तु की विधि।

window.addEventListener ('क्लिक', e => {e.stopPropagation ()}, true) window.addEventListener ('क्लिक', श्रोता ('c1'), true, window.addEventListener ('क्लिक', श्रोता) (c2) '), सच) window.addEventListener (' क्लिक ', श्रोता (' b1 ')) window.addEventListener (' क्लिक ', श्रोता (' b2 '))

कीवर्ड को लागू करके हम प्रचार को रोकने में सक्षम हैं। यह इस तरह से काम करता है, जब हम कीवर्ड लागू कर रहे हैं ” रोक तब मुख्य घटनाओं के तहत सभी घटनाओं को बुलाया नहीं जा रहा है और इसलिए उन्हें नहीं बुलाया जाएगा जैसा कि ऊपर दिए गए कोड के टुकड़े में बताया गया है। एक अन्य कीवर्ड है जिसे 'के रूप में जाना जाता है' stopImmediatePropagation ”। जैसा कि नाम से पता चलता है कि यह भाई-बहन की कार्यवाही को तुरंत रोक देता है।

इसके साथ, हम अपने लेख के अंत में आ गए हैं। मुझे उम्मीद है कि आपको समझ में आ गया होगा कि जावास्क्रिप्ट में Event Bubbling और Event Capturing क्या है।

अब जब आप जावास्क्रिप्ट में ईवेंट बबलिंग और ईवेंट कैप्चरिंग के बारे में जानते हैं, तो देखें Edureka द्वारा। वेब डेवलपमेंट सर्टिफिकेशन ट्रेनिंग आपको HTML5, CSS3, ट्विटर बूटस्ट्रैप 3, jQuery और Google API का उपयोग करके प्रभावशाली वेबसाइट बनाने और इसे अमेज़ॅन सिंपल स्टोरेज सर्विस (S3) में तैनात करने में मदद करेगी।

क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'ईवेंट बबलिंग और जावास्क्रिप्ट में इवेंट कैप्चरिंग' के टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।