.on() फ़ंक्शंस के बीच अंतर

Question

निम्न के बीच क्या अंतर है?

$(document).on("scroll",".wrapper1", function(){ 
    $(".wrapper2") 
    .scrollLeft($(".wrapper1").scrollLeft()); 
}); 

$('.wrapper1').on("scroll", function(){ 
     $(".wrapper2") 
      .scrollLeft($(".wrapper1").scrollLeft()); 
}); 

प्रत्येक कार्य को वास्तव में कब उपयोग किया जाना चाहिए?

Answer 1

इन दोनों हैं

$('.wrapper1').on("scroll", ....) के बीच अंतर केवल उन तत्वों के बाद इस बयान है अगर वर्ग wrapper1 के साथ किसी भी नए तत्व गतिशील रूप से जोड़ा जाता है जो इस बयान, यानी के निष्पादन के समय उपस्थित हैं करने के लिए स्क्रॉल घटना बांधता निष्पादित तब ईवेंट हैंडलर उन तत्वों के लिए निष्पादित नहीं किया जाएगा।

दूसरी ओर $(document).on("scroll",".wrapper1", ...)document वस्तु को एक ईवेंट हैंडलर पंजीकृत करेंगे और घटना के उपयोग हैंडलर आह्वान करने के लिए जब भी स्क्रॉल वर्ग `wrapper`` साथ एक तत्व के भीतर होता है बुदबुदाती कर देगा, तो यह तत्वों की गतिशील अलावा समर्थन करेंगे ।

तो एक विधि

को पसंद करते हैं जब यदि आप तत्वों का केवल एक सीमित संख्या है आप पहली विधि पसंद करते हैं और वे गतिशील रूप से जोड़ा नहीं कर रहे हैं

पसंद करते हैं दूसरी विधि यदि आप तत्वों या इनमें से बहुत कुछ है तत्व गतिशील रूप से जोड़ा जाता है।

Answer 2

पहला मामला यह है कि श्रोता दस्तावेज़ को लक्षित कर रहा है, इसलिए यदि आपके पास पृष्ठ लोड पर .wrapper1 नहीं है और इसे अतिरिक्त रूप से जोड़ें (AJAX या किसी अन्य तरीके) ईवेंट अभी भी आग लगेगा (दस्तावेज़ के बाद से) हमेशा वहाँ है)।

दूसरे मामले में यदि .wrapper1 गतिशील रूप से जोड़ा जाता है तो ईवेंट आग नहीं लगेगा, यहां तक ​​कि सोचा था कि आप इसका उपयोग कर रहे हैं .on() क्योंकि आपके पास उस पर बाध्य करने के लिए कोई तत्व नहीं है।

कहा जा रहा है कि दूसरे संस्करण का उपयोग तभी किया जाना चाहिए जब चयनित तत्व गतिशील रूप से नहीं बनाया गया हो और विपरीत मामले में पहला।

Answer 3

प्रभाव वही होगा, लेकिन जिस तरह से ईवेंट हैंडलर को ईवेंट दिया जा रहा है वह थोड़ा अलग है।

आप प्रत्येक मामले में .on() का उपयोग कर रहे हैं, लेकिन चयनकर्ता का उपयोग दूसरे संस्करण में नहीं किया जा रहा है। घटना पहले उदाहरण में का प्रतिनिधि है और दूसरे में सीधे बाध्य है।.on() प्रलेखन राज्यों:

प्रत्यक्ष घटनाओं के लिए,

हैंडलर हर बार एक घटना चयनित तत्वों पर होता है कहा जाता है, चाहे वह तत्व या वंश (भीतरी) तत्व से बुलबुले पर सीधे होता है

के लिए सौंपी गई घटनाओं,

हैंडलर नहीं बुलाया जाता है जब घटना बाध्य तत्व पर सीधे होता है, लेकिन केवल वंश (भीतरी तत्व) कि चयनकर्ता से मेल के लिए

क्या होता है एक घटना ब्राउज़र द्वारा पता लगाया जाता है जब यह ऊपर बुलबुले DOM। रास्ते पर प्रत्येक तत्व पर, jQuery संलग्न ईवेंट हैंडलर को कॉल करेगा। पहले संस्करण में यह घटना तत्व में उत्पन्न होने पर jQuery की जांच से पहले document तक सभी तरह से प्रचारित होती है। दूसरा संस्करण, घटना class="wrapper1" तत्व पर होने पर घटना पहले बुलबुल करना बंद कर देगी।

अन्य अंतर यह है कि पहले संस्करण अभी भी अगर .wrapper1 मौजूद नहीं है जब पेज, लोड हो जाए, यानी अगर तत्व गतिशील रूप से जोड़ा जाता है दूसरा संस्करण काम नहीं करेगा ईवेंट हैंडलर बाध्य करने में सक्षम हो जाएगा है। जब पृष्ठ लोड होता है और jQuery को $('.wrapper1') निष्पादित नहीं किया जा सकता है।

यदि .wrapper1 तत्व गतिशील नहीं हैं तो आपको शायद दूसरे संस्करण का उपयोग करने का एक (नगण्य) प्रदर्शन लाभ मिलेगा।

यह सब एक तरफ, scroll event does not bubble और प्रतिनिधि नहीं दिया जा सकता है। हालांकि, वे .on() प्रलेखन से फिर प्रत्यायोजित किया जा सकता:

सभी ब्राउज़रों में, भार, पुस्तक, और त्रुटि की घटनाओं (जैसे, एक तत्व पर) बुलबुला नहीं है। इंटरनेट एक्सप्लोरर 8 और निचले हिस्से में, पेस्ट और रीसेट ईवेंट बबल नहीं करते हैं। ऐसी घटनाएं प्रतिनिधिमंडल के उपयोग के लिए समर्थित नहीं हैं, लेकिन इनका उपयोग तब किया जा सकता है जब ईवेंट हैंडलर सीधे उत्पन्न करने वाले तत्व से जुड़ा होता है।

तो काम करने वाला एकमात्र संस्करण दूसरा है! DevTools कंसोल में See demodocument scroll आउटपुट कभी प्रकट नहीं होता है।