बुलबुल और घटनाओं को पकड़ने वाली घटनाएं

कल्पना करें कि पृष्ठ पर दो ब्लॉक हैं, और एक दूसरे में नेस्टेड है, जैसा कि आंकड़े में दिखाया गया है। पेज लेआउट में, यह इस तरह दिखता है:

<div id="block_outer"> <div id="block_inner"></div> </div> 

अब कल्पना करें कि onClickOuter इवेंट #block_outer ब्लॉक से जुड़ा हुआ है, और onClickInner ईवेंट क्रमशः, #block_inner ब्लॉक में। और इस सवाल का जवाब दें कि कैसे सुनिश्चित करें कि जब आप #block_inner ब्लॉक पर क्लिक करते हैं, तो onClickOuter ईवेंट नहीं उठाया जाता है? और क्या इसे बिल्कुल भी कहा जाएगा? और यदि हां, तो किस क्रम में घटनाओं को ट्रिगर किया जाएगा? और क्या आप जानते हैं कि अन्य पुस्तकालयों में jQuery.live पद्धति या इसी तरह के काम कैसे होते हैं (उदाहरण के लिए एक्सटीजेएस में घटना प्रतिनिधिमंडल)?

थोड़ा इतिहास

सभ्यता के समय, जब डायनासोर ग्रह के चारों ओर भागते थे, और प्राचीन आईटी कर्मचारियों ने पत्थर पर नक्काशीदार स्मार्टफोन का उपयोग किया था, पूरे जोरों पर एक ब्राउज़र युद्ध हुआ था, वेब पेजों पर घटनाओं के व्यवहार पर एमएस और नेटस्केप के विचारों को विभाजित किया गया था (सौभाग्य से, मुझे उम्र के कारण सामना नहीं करना पड़ा था उन दिनों में वापस)। जब पृष्ठ पर नेस्टिंग तत्व (जैसा कि ऊपर उदाहरण में है), एमएस ने एक ईवेंट बबलिंग मॉडल का प्रस्ताव रखा, अर्थात, ईवेंट का क्रम डोम ट्री की संरचना को बढ़ाता है। नेटस्केप ने विपरीत मॉडल का प्रस्ताव रखा, जिसे इवेंट कैप्चरिंग कहा जाता है, जिसमें इवेंट प्रोसेसिंग को डोम ट्री के नीचे तत्वों ("उन्हें" पकड़ना) पर जाना चाहिए।



W3C ने दोनों विकल्पों को संयोजित करने का प्रयास किया - मानक प्रोग्रामर को विधि के तीसरे पैरामीटर का उपयोग करके पृष्ठ पर घटनाओं के व्यवहार को स्वयं निर्धारित करने की अनुमति देता है

  addEventListener(type, listener, useCapture) 

यही है, जब आप क्लिक करते हैं, तो "डिसेंट" चरण पहली बार होगा, और उपयोग के साथ जुड़े घटनाओं = सत्य ध्वज को ट्रिगर किया जाएगा, फिर "एसेंट" चरण को ट्रिगर किया जाएगा, और अन्य घटनाओं को DOM ट्री के साथ आरोही क्रम में ट्रिगर किया जाएगा। डिफ़ॉल्ट रूप से, ईवेंट हमेशा बबलिंग चरण की सदस्यता लेते हैं, अर्थात, इस सुविधा का उपयोग करने की विधि के साथ - गलत या गलत:

  elementNode.onclick = someMethod; 

ब्राउज़र आज कैसे काम करते हैं?

AddEventListener विधि संस्करण 9 से कम IE में मौजूद नहीं है। इसके लिए, संलग्नक का उपयोग किया जाता है, जिसमें तीसरा तर्क नहीं होता है, अर्थात्, आईई में घटनाएं हमेशा "गुरगल" होती हैं, और इस ब्राउज़र के लिए नीचे वर्णित बहुत से कोई मतलब नहीं है। अन्य सभी ब्राउज़र 2000 से विचलन के बिना विनिर्देशन के अनुसार addEventListener को लागू करते हैं।

उपरोक्त को संक्षेप में बताने के लिए, आइए एक छोटा परीक्षण लिखें जो यह दिखाए कि आप घटनाओं की प्राथमिकता को कैसे नियंत्रित कर सकते हैं:

• HTML संरचना:

    <div id="level1"> <div id="level2"> <div id="level3"> </div> </div> </div> 

• लिपि

    // using jQuery; jQuery.fn.addEvent = function(type, listener, useCapture) { var self = this.get(0); if (self.addEventListener) { self.addEventListener(type, listener, useCapture); } else if (self.attachEvent) { self.attachEvent('on' + type, listener); } } 

  
  

    var EventsFactory = function(logBox){ this.createEvent = function(text){ return function(e){ logBox.append(text + ' '); } } } var factory = new EventsFactory( $('#test') ); $('#level1').addEvent('click', factory.createEvent(1), true); $('#level1').addEvent('click', factory.createEvent(1), false); $('#level2').addEvent('click', factory.createEvent(2), true); $('#level3').addEvent('click', factory.createEvent(3), false); 

• डेमो

जब आप ब्लॉक # लेवल 3 पर क्लिक करते हैं, तो नंबर निम्नलिखित क्रम में प्रदर्शित होंगे:

    १ २ ३ १

यही है, ब्लॉक # लेवल 1 और # लेवल 2 को कैप्चरिंग चरण के लिए सब्सक्राइब किया जाता है, और # लेवल 3 और # लेवल 1 (एक बार हस्ताक्षरित) को बबलिंग चरण में रखा जाता है। कैप्चरिंग चरण को पहले कहा जाता है, पेड़ के नीचे एक वंश के साथ, पहले एक # स्तर 1 है, फिर # स्तर 2 है, फिर # स्तर 3 तत्व की रेखा स्वयं उपयुक्त है, और फिर, डोम के साथ ऊपर उठाने पर, # स्तर तत्व की रेखा फिर से उपयुक्त है। इंटरनेट एक्सप्लोरर हमें दिखाएगा:

    ३ २ १ १

अगली घटना को कैसे रोकें?

बाध्य घटनाओं में से कोई भी निम्नलिखित तत्वों को रोक सकता है:

 function someMethod(e) { if (!e) { window.event.cancelBubble = true; } else if (e.stopPropagation) { e.stopPropagation(); } } 

W3C मॉडल किसी ईवेंट ऑब्जेक्ट के स्टॉपप्रॉपैगैशन मेथड का वर्णन करता है, लेकिन Microsoft यहां भी अलग है, इसलिए IE के लिए आपको event.cancelBubble फ़ील्ड को संदर्भित करने की आवश्यकता है।

घटना का लक्ष्य

जैसा कि आप जानते हैं, घटना को ट्रिगर करने वाले पृष्ठ तत्व को निर्धारित करना संभव है। ईवेंट ऑब्जेक्ट में एक लक्ष्य फ़ील्ड है जो आरंभ करने वाले तत्व को संदर्भित करता है। उदाहरण के साथ दिखाना आसान है:

• HTML संरचना:

    <div id="level1"> <div id="level2"> <div id="level3"> </div> </div> </div> 

• लिपि

    $('#level1').addEvent('click', function(e) { // MSIE "features" var target = e.target ? e.target : e.srcElement; if ( $(target).is('#level3') ) { $('#test').append('#level3 clicked'); } }, false); 

• डेमो

मुझे समझाएं कि यहां क्या हो रहा है - # लेवल 1 के अंदर किसी भी क्लिक से हम ईवेंट लक्ष्य की जांच करते हैं, और यदि सर्जक आंतरिक ब्लॉक # लेवल 3 है, तो हम कुछ कोड निष्पादित करते हैं। क्या यह कार्यान्वयन आपको कुछ याद दिलाता है? यह इस प्रकार है कि jQuery.live काम करता है: यदि कोई तत्व पृष्ठ पर मौजूद नहीं है, लेकिन यह भविष्य में दिखाई देता है, तो आप अभी भी किसी ईवेंट को इसमें बाँध सकते हैं। बुदबुदाहट के चरण के दौरान, कोई भी घटना दस्तावेज़ के स्तर तक पहुँच जाती है, जो पृष्ठ पर सभी तत्वों के लिए सामान्य अभिभावक है, और हम ईवेंट से जुड़े कुछ फ़ंक्शंस को निष्पादित कर सकते हैं या नहीं कर सकते हैं।

और यहां सवाल उठता है: यदि jQuery.live इवेंट्स को डॉक्यूमेंट स्तर पर बबलिंग चरण में बांधता है, तो पिछली घटनाएं कॉल चेन को रोक सकती हैं और अंतिम ईवेंट के कॉल को बाधित कर सकती हैं? हां, यह ऐसा है, यदि इस कॉल इवेंट से पहले निष्पादित होने वाली घटनाओं में से एक ।stopPropagation (), कॉल श्रृंखला बाधित हो जाएगी। यहाँ एक उदाहरण है:

• HTML संरचना:

    <div id="level1"> <div id="level2"> <div id="level3"> </div> </div> </div> 

• लिपि

    $('#level1').live('click', function(e){ $('#test').append('#level1 live triggered'); }); $('#level2').bind('click', function(e){ $('#test').append('this will break live event'); if (e.stopPropagation) { e.stopPropagation(); } }); 

• डेमो

जब आप क्षेत्र # स्तर 3 पर क्लिक करते हैं, तो "यह लाइव इवेंट को तोड़ देगा" प्रदर्शित किया जाएगा, अर्थात लाइव इवेंट निष्पादित नहीं किया जाएगा। कृपया ध्यान दें कि इस तरह की हैक संभव है, यह किसी चीज़ का एक सुंदर कार्यान्वयन हो सकता है, और कभी-कभी यह एक कठिन (नारकीय रूप से कठिन) बोधगम्य गलती हो सकती है।
यह भी ध्यान रखना महत्वपूर्ण है कि उपरोक्त उदाहरण में, चर "e" एक jQuery.Event उदाहरण है। IE के लिए, एक घटना में एक स्टॉपप्रोपैजेशन विधि नहीं होती है, और आपको IE में बुदबुदाहट को रोकने के लिए फ्लैग ईवेंट.cancelBubble = true सेट करना होगा। लेकिन jQuery इस समस्या को हल करता है, इस विधि को अपने स्वयं के साथ बदल देता है।

विभिन्न जेएस लाइब्रेरी घटनाओं के साथ कैसे काम करती हैं?

इस बिंदु पर, मैं एक आरक्षण करूँगा कि बहुत सारे पुस्तकालय हैं जो घटनाओं के साथ काम कर सकते हैं, लेकिन हम केवल jQuery, MooTools, Dojo और ExtJS पर विचार करेंगे, क्योंकि लेख और लेखक का ज्ञान, दुर्भाग्य से, रबड़ नहीं है। इसलिए, प्रशंसकों को भाषा और रूपरेखा पर चर्चा करने के लिए, मैं आपसे गुजरने के लिए कहता हूं।

• jQuery
  जानता है कि बाइंड के माध्यम से घटनाओं के साथ कैसे काम किया जाए, जो हमेशा घटनाओं को बुदबुदाती अवस्था में बांधता है, लेकिन एक तीसरा पैरामीटर है, "preventBubble", जो इस हैंडलर के लिए घटनाओं की श्रृंखला को रोकता है। इसके लिए रैपर भी हैं , जैसे कि क्लिक , परिवर्तन आदि, और घटनाओं को प्रतिनिधि बनाने के तरीके: प्रतिनिधि , लाइव ।
• MooTools
  addEvent के माध्यम से घटनाओं के साथ काम करना जानता है, जो कस्टम घटनाओं को संभाल सकता है। AddEvent आपको प्रोसेसिंग चरण को निर्दिष्ट करने की अनुमति भी नहीं देता है। आप छद्म का उपयोग कर घटना प्रतिनिधिमंडल के साथ काम कर सकते हैं : रिले ।
• डोजो
  कनेक्ट का उपयोग करता है (जो "NOTFix" पैरामीटर निर्दिष्ट होने पर घटनाओं की श्रृंखला को रोक सकता है) या व्यवहार । प्रतिनिधिमंडल के लिए, आप प्रतिनिधि विधि का उपयोग कर सकते हैं।
• ExtJS
  मेरी राय में, घटनाओं के साथ काम करने के लिए सबसे सरल इंटरफ़ेस। ऑब्जेक्ट के रूप में मापदंडों को पारित करने के लिए विधि पर संभव है, जैसे कि, उदाहरण के लिए, देरी, stopPropagation, प्रतिनिधि, या अपने स्वयं के तर्क।

जैसा कि हम देख सकते हैं, ये सभी पुस्तकालय क्रॉस-ब्राउज़र संगतता के साथ समझौता करते हैं, और हर जगह घटनाओं के साथ काम करने के लिए समान कार्यक्षमता प्रदान करते हुए, बुदबुदाती हुई घटनाओं का उपयोग करते हैं। हालाँकि, यह समझने से कि यह अंदर से कैसे काम करता है, यह कभी चोट नहीं पहुँचाएगा :)

सामग्री

• www.quirksmode.org
• blog.bigbinary.com
• www.w3.org
• api.jquery.com
• mootools.net
• dojotoolkit.org
• sencha.com