jQuery .on(); बनाम जावास्क्रिप्ट .addEventListener();

Question

क्या कोई मुझे समझा सकता है कि ऑर्डर हैंडलर को कैसे कार्यान्वित किया जा रहा है, इस आधार पर उसमें कोई अंतर क्यों है? नीचे दिए गए उदाहरण में मैं विभिन्न DOM तत्वों पर एक विशिष्ट ईवेंट को संभालने के लिए .on() और .addEventListener() विधियों का उपयोग कर रहा हूं।

jsfiddle: http://jsfiddle.net/etsS2/

मैंने सोचा था कि इस विशिष्ट उदाहरण में जिस क्रम में ईवेंट हैंडलर्स event-bubbling पर निर्भर करेगा निष्पादित करने के लिए जा रहे हैं - तो मूल घटना target से शुरू और अप करने के लिए आगे बढ़ document तत्व।

document.getElementById('outer').addEventListener('mouseup', function (event) { 
//$('#outer').on('mouseup', function (event) { 
    alert('This alert should not show up!'); 
}, false); 

अगर मैं uncomment on(); संस्करण सब कुछ काम करता है के रूप में उम्मीद - वहाँ में कैसे jQuery सादा JavaScript के विपरीत घटनाओं संभालती एक अंतर है?

Answer 1

जब आप दस्तावेज़ स्तर पर .on() का उपयोग करते हैं, तो आप उस बिंदु तक सभी तरह से बुलबुले करने की प्रतीक्षा कर रहे हैं। किसी भी मध्यवर्ती कंटेनर के लिए इवेंट हैंडलर को पहले से ही बुलाया जाएगा।

इवेंट "बबलिंग" वह प्रक्रिया है जिसके द्वारा ब्राउज़र ईवेंट के वास्तविक मूल प्राप्तकर्ता तत्व के माता-पिता के साथ पंजीकृत ईवेंट हैंडलर की तलाश करता है। यह डोम पेड़ में ऊपर काम करता है। दस्तावेज़ स्तर अंतिम स्तर की जांच है। इस प्रकार, .on() के साथ पंजीकृत आपका हैंडलर तब तक नहीं चलेगा जब तक वह स्तर तक नहीं पहुंच जाता। इस बीच, "बाहरी" स्तर पर अन्य ईवेंट हैंडलर पहले पहुंच गया है और इसे ब्राउज़र द्वारा निष्पादित किया जाता है।

इस प्रकार, के साथ पंजीकृत हैंडलर मेंपर कॉल करने के लिए बहुत बेकार है। इसके अलावा, काम के साथ मूल घटना हैंडलर पंजीकरण को मिलाकर जो jQuery जैसी लाइब्रेरी करेगा, वह वास्तव में एक बुरा विचार है जबतक कि आप गंभीरता से नहीं जानते कि आप क्या कर रहे हैं।

आज कुछ समय पहले a question asked almost exactly like this one था। addEventListener संस्करण पर

Answer 2

देखो:

document.getElementById('outer').addEventListener('mouseup', function (event) { 
    alert('This alert should not show up!'); 
}, false); 

कि ठीक काम करता है क्योंकि तीसरा तर्क useCapture है, जो निर्दिष्ट करता है या नहीं, घटना के कब्जा चरण इस्तेमाल किया जाना चाहिए।

आप jQuery संस्करण में स्विच करते हैं:

$('#outer').on('mouseup', function (event) { 
    alert('This alert should not show up!'); 
}, false); 

मुझे लगता है कि क्या हो रहा है तीसरा तर्क बस ओवरराइड अपने ईवेंट हैंडलर समारोह है और जो स्पष्ट रूप से नहीं है, लेकिन return false; कुछ भी नहीं करना ईवेंट हैंडलर का कारण बनता है क्या होने का मतलब है।

jQuery docs से (जोर जोड़ा): जब घटना शुरू हो रहा है

एक समारोह निष्पादित करने के लिए। मान झूठा भी एक फ़ंक्शन के लिए शॉर्टेंड के रूप में अनुमति देता है जो झूठी लौटाता है।

false तर्क निकालें और jQuery संस्करण सही ढंग से भी काम करेगा:

$('#outer').on('mouseup', function (event) { 
    alert('This alert should not show up!'); 
}); 

ध्यान दें कि alertचाहिए, दिखाई तो addEventListener दृष्टिकोण सही ढंग से काम कर रहा है। @ प्वाइंट के जवाब के लिए यह क्यों देखें।