DOM में घटनाओं का क्रम

उनके कैलेंडर में एक समस्या का सामना करना पड़ा - दो तत्व हैं, जिनमें से एक पूरी स्क्रीन पर पूरी तरह से तैनात है, एक पारभासी रंग का पर्दा और दूसरा एक रूप है। आपने शायद ऐसे फैसले देखे हों जब किसी चित्रपट में चित्र प्रदर्शित किए हों या हब्बर पर प्रमाणीकरण हो।

















समस्या यह है कि जब आप आंतरिक तत्व पर क्लिक करते हैं, तो घटना को मूल तत्व पर स्वचालित रूप से कहा जाता है। इसने मुझे समाधान और सिद्धांत दोनों के बारे में सोचा कि ब्राउज़र कैसे काम करते हैं।

ढाई मॉडल

जैसा कि यह पता चला है, एक वस्तु-उन्मुख पदानुक्रम में घटनाओं को पारित करने के लिए दो मॉडल हैं

• बुलबुला विधि ( बुदबुदाहट ), जब घटना अंदर होती है और फिर बाहर के मूल तत्वों को पारित कर दी जाती है। एमएस इंटरनेट एक्सप्लोरर, ओपेरा, फ़ायरफ़ॉक्स
  
  
• किसी ईवेंट को कैप्चर करना ( कैप्चर करना ), इस घटना को पहले माता-पिता द्वारा संसाधित किया जाता है, और फिर गहराई से प्रवेश करता है। ओपेरा, फ़ायरफ़ॉक्स

W3C कंसोर्टियम ने विवेकपूर्ण रूप से निर्णय लिया कि डेवलपर्स के लिए किसी भी दिशा में ईवेंट (ईवेंट प्रचार) भेजना सुविधाजनक हो सकता है, इसलिए, मानक के अनुसार, दो मॉडल संयुक्त होते हैं - ईवेंट पहले कैप्चर किया जाता है, और फिर बुलबुले के रूप में वापस आ जाता है।





इस प्रकार, डेवलपर घटना के चरण में तथाकथित विधि को बांध सकता है:

$('form_bg').addEventListener('click',hideBackground,true); // true - capturing $('form').addEventListener('click',doNothing,false); // false - bubbling











यह पता चला है कि जब आप form_bg पर क्लिक करते हैं, तो HideBackground तुरंत होता है, फॉर्म को कैप्चरिंग चरण में नहीं बुलाया जाता है, फिर रिटर्न, बबलिंग चरण में doNothing कहा जाता है ।

डिफ़ॉल्ट परंपरा

W3C मॉडल सुखद है, लेकिन डिफ़ॉल्ट रूप से, IE के कारण सबसे अधिक संभावना है, सामान्य घटना पंजीकरण का अर्थ है एक बुदबुदाहट चरण, अर्थात। अंदर बाहर। और यह बदले में इसका मतलब है कि अगर मैं स्पष्ट रूप से मूल तत्व को इंगित करता हूं: $('form_bg').onclick = hideBackground; // - div id='form_bg' onclick=..





$('form_bg').onclick = hideBackground; // - div id='form_bg' onclick=..









बिना किसी घटना के सभी माता-पिता तत्वों को ऑन्कलिक घटनाओं को संसाधित करने का कारण बनता है। क्या उनके पास यह है या नहीं, रूट-डॉक्यूमेंट के ठीक नीचे है।

बबल फ्री

क्रॉस-ब्राउज़र संस्करण में, मूल तत्वों के लिए ईवेंट प्रोसेसिंग के प्रसार को रोकने के लिए, आपको कैंसबेल पैरामीटर को सही (IE के लिए) में बदलने की जरूरत है और स्टॉपप्रॉपैगेनेशन फ़ंक्शन (W3C मॉडल) को कॉल करें:



function hideBackground(e){

if (!e) var e = window.event;

e.cancelBubble = true;

if (e.stopPropagation) e.stopPropagation();

}









अब मुझे इस बात में दिलचस्पी है कि इवेंट प्रोसेसिंग मॉडल को अन्य भाषाओं और प्लेटफार्मों में कैसे व्यवस्थित किया जाता है - जावा, नेट, फ्लैश .. लेख " इवेंट ऑर्डर " पर आधारित।



+ टिप्पणियों के साथ मूल