jQuery पर() का उपयोग करते समय, तत्व (बनाम) बनाम तत्व का उपयोग क्यों करें?

Question

मैं उनके अपने शब्दों में एक jQuery विशेषज्ञ क्यों चाहते हैं कि $ (दस्तावेज़) पहचानकर्ता jQuery के पर के लिए दूसरों के द्वारा की सिफारिश की है() बनाम सिर्फ एक तत्व ही

उदाहरण 1 का उपयोग कर समझाने के लिए बयान: क्यों $ उपयोग कर रहा है (दस्तावेज) यहां बेहतर उदाहरण # 2?

$(document).on("click", ".areaCodeList a", function(){ 
    // do stuff 
}); 

उदाहरण 2: इस उदाहरण का उपयोग उदाहरण 1 की तुलना में अच्छे अभ्यास पर विचार करने के तरीके का उपयोग क्यों नहीं कर रहा है?

$(".areaCodeList a").on("click", function(){ 
    // do stuff 
}); 

Answer 1

दोनों उन लोगों में से मान्य हैं।

गतिशील रूप से जोड़े गए तत्वों के लिए पूर्व कार्य। आप document का उपयोग करते हैं क्योंकि आप दस्तावेज़ ऑब्जेक्ट के बच्चों पर ईवेंट प्रस्तुत कर रहे हैं, इसलिए दस्तावेज़ स्तर तक ईवेंट बबल हो जाते हैं। आपके द्वारा किए जा सकने वाले निकटतम माता-पिता का चयन करना भी अधिक सुविधाजनक है (और माता-पिता लोड पर पृष्ठ पर मौजूद होना चाहिए)।

उत्तरार्द्ध अभी भी काम करता है, और विशिष्ट तत्वों को ईवेंट को बाध्य करने का एक पसंदीदा तरीका है।

मैं व्यक्तिगत रूप से document ऑब्जेक्ट के माध्यम से प्रतिनिधिमंडल की सिफारिश नहीं करता, बल्कि पृष्ठ लोड पर मौजूद सबसे नज़दीकी माता-पिता।

Hereon() के लिए दस्तावेज़ हैं।

Answer 2

यह सच नहीं है।

वे दो पंक्तियां पूरी तरह से दो अलग-अलग चीजें करती हैं।

पहला व्यक्ति ".areaCodeList a" के चयनकर्ता के साथ एक प्रतिनिधि कार्यक्रम है जबकि दूसरी पंक्ति ".areaCodeList a" तत्वों से जुड़ी एक घटना है।

एक प्रतिनिधि कार्यक्रम प्रत्येक ".areaCodeList a" तत्व पर आग लगाएगा हालांकि यह लाइन निष्पादित होने पर डोम में थी।

वैसे भी, प्रतिनिधि कार्यक्रमों को document पर संलग्न करने की बिल्कुल अनुशंसा नहीं की जाती है।live डॉक्स में लिखा है:

के बाद से सभी .live() की घटनाओं दस्तावेज़ तत्व पर जुड़े होते हैं, घटनाओं सबसे लंबी और सबसे धीमी संभव पथ लेने से पहले वे नियंत्रित किया जाता है

कृपया on पढ़ docs:

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

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

Answer 3

इस बारे में "अनुशंसित" कुछ भी नहीं है। पहला स्निपेट एक "प्रतिनिधि" घटना सेट करता है, बाद वाला एक "प्रत्यक्ष" होता है। documentation for on() गहराई से इन्हें समझाता है।

प्रतिनिधि कार्यक्रमों की आवश्यकता होती है जब आपको उन तत्वों के लिए ईवेंट सुनने की आवश्यकता होती है जो अभी तक मौजूद नहीं हैं - उदाहरण के लिए, एक AJAX कॉल के बाद गतिशील रूप से बनाया जाएगा। वे कभी-कभी बेहतर प्रदर्शन-वार भी हो सकते हैं - आपको 1000 बटन की तुलना में दस्तावेज़ ऑब्जेक्ट में "वास्तविक" ईवेंट हैंडलर संलग्न करने के लिए कम स्मृति की आवश्यकता होती है।

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

Answer 4

मुझे लगता है कि आप कुछ अवधारणाओं को भ्रमित कर रहे हैं। दस्तावेज़ तत्व से जुड़ने की अनुशंसा नहीं की जाती है, हालांकि कई बार ऐसा करना होता है जब आप गतिशील रूप से जोड़े गए तत्वों को बाध्यकारी करते हैं।

यह सब अस्पष्ट प्रतीत हो सकता है, इसलिए here पहला उदाहरण है जो क्लास चयनकर्ता का सीधे उपयोग करता है और एक क्लिक ईवेंट को बांधता है, ईवेंट बाध्य होने के बाद बाद में गतिशील रूप से डाला जाता है। जैसा कि आप देख सकते हैं कि घटना कभी नहीं निकाल दी जाती है क्योंकि हमने उस तत्व को चुना है जो घटना के बाध्य होने पर डीओएम में मौजूद नहीं था। यह .click

के समतुल्य है अब यह दूसरा उदाहरण देखें। यहां आप देखते हैं कि हम रूट तत्व को document के रूप में परिभाषित कर रहे हैं। जिसका अर्थ यह है कि क्लिक इवेंट डीओएम पेड़ को सभी तरह से बुलबुला करेगा और फिर उस तत्व को आग लग जाएगा यदि क्लिक किए गए तत्व में कक्षा गतिशील है। यह .live

अब, उदाहरण के लिए, यदि घटना को बाध्य करने के समय डीओएम में मौजूद तत्व मौजूद था, तो कोड ठीक काम करेगा, क्योंकि आप here देख सकते हैं।

कहा जा रहा है। यहां docs को छोड़कर एक उपरोक्त व्यवहार को स्पष्ट करता है।

इवेंट हैंडलर केवल वर्तमान में चयनित तत्वों के लिए बाध्य हैं; वे आपके कोड को कॉल करने के समय पृष्ठ पर मौजूद होना चाहिए।()

तो, निष्कर्ष में। document तत्व का उपयोग करें जब आप सुनिश्चित हों कि उस तत्व के लिए कोई मूल तत्व नहीं है जिसे आप चुन रहे हैं, उस समय डीओएम में होने की गारंटी है।यदि मौजूद कोई मूल तत्व मौजूद है तो document तत्व के बजाय इसका उपयोग करें। इस तरह घटना को document तक सभी तरह से बुलबुला नहीं करना पड़ेगा, इसे केवल थोड़ी दूरी की यात्रा करने की आवश्यकता है।

Answer 5

वास्तव में इस तरह के मामले में सबसे अच्छा समाधान $(document) का उपयोग नहीं कर रहा है और न ही $("selector") जैसे विशिष्ट तत्व का उपयोग नहीं कर रहा है।

सबसे अच्छा तरीका तत्व के कंटेनर का उपयोग कर रहा है और फ़ंक्शन में तत्व चयनकर्ता को बांधता है। ऐसा करके आप दस्तावेज़ को अनावश्यक घटना से बुलबुले से बचें।

तो कोड देखो की तरह करना चाहिए:

$("this_is_the_container").on('event','my_element_selector',function(){ 
// do some stuff here 
}) 

Answer 6

$(*selector*).on(*event*, function(){}) 

केवल तत्व है जो पहले से ही स्क्रिप्ट रन के पल में पेज में लोड कर रहा है के लिए लागू होगी। यदि भविष्य में, नए तत्व दिखाई देंगे, तो ईवेंट हैंडलर काम नहीं करेगा।

$(document).on(*event*, *selector*, function(){} 

ईवेंट हैंडलर तक कि एक ही चयनकर्ता के साथ तत्वों स्क्रिप्ट चलाने के बाद पृष्ठ पर दिखाई देगा पर अमल होगा।

इसलिए, यदि आप यादृच्छिक समय में के बाद कुछ तत्व है, जो दिखाई दे सकता है है, का उपयोग

$(document).on() 

बाकी

का उपयोग

$(*selector*).on();