चयनकर्ता पैरामीटर और jquery प्रतिनिधि के साथ/बिना jquery के बीच अंतर क्या है?

Question

मैं jquery 1.10 का उपयोग कर रहा हूं। मैं जानना चाहता हूं कि इन तीन कार्यों के बीच क्या अंतर है।

कौन सा कार्य बेहतर है और क्यों?

प्रतिनिधि समारोह का उद्देश्य क्या है?

$(".dropdown-menu").on("click", ".show_opt_menu", function() { 
    alert("hello"); 
}); 
$(".dropdown-menu .show_opt_menu").on("click", function() { 
    alert("hello"); 
}); 
$(".dropdown-menu").delegate(".show_opt_menu", "click", function() { 
    alert("Delegate"); 
}); 

क्या कोई मुझे समझा सकता है?

Answer 1

सबसे पहले, तीसरा फ़ंक्शन (.delegate) .on (jQuery 1.7 आगे) द्वारा हटा दिया गया है, इसलिए मैं इसका उपयोग नहीं करता।

दूसरी विधि जटिल चयनकर्ता ".dropdown-मेनू .show_opt_menu" है, जो है (अपेक्षाकृत) महंगा के रूप में यह पहले तो सभी .show_opt_menu रों हो जाता है चलेंगे जो माता-पिता कि .dropdown-menu हैं देखने के लिए लग रहा है। यह फिर प्रति तत्व एक घटना बांधता है। यह (अपेक्षाकृत) महंगा है क्योंकि आप धीमी क्वेरी चला रहे हैं, फिर संभावित रूप से कई घटनाओं को बाध्य कर रहे हैं।

पहली विधि सबसे अच्छी है, क्योंकि यह केवल एक घटना को .dropdown-menu पर बांधती है, फिर भी जब भी click ईवेंट बुलबुले हो जाता है, तो यह देखने के लिए ईवेंट की जांच करता है कि मूल लक्ष्य क्या था। यह एक बहुत सस्ता विकल्प है, और चूंकि केवल एक घटना बाध्य है, यह बहुत अधिक प्रदर्शनकारी है।

---

सारांश: # 1 सबसे अच्छा है, # 2 आमतौर पर किया जाता है लेकिन बदतर, # 3 पुराना है।

आपको किसी भी प्रदर्शन अंतर को ध्यान में नहीं रखा जाएगा, लेकिन यह किसी भी तरह से ध्यान देने योग्य है क्योंकि यह अच्छा अभ्यास है। किसी बिंदु पर, आपको प्रदर्शन के साथ खुद को चिंता करने की आवश्यकता हो सकती है।

Answer 2

पहला प्रतिनिधि कार्यक्रम हैंडलर है। यह आपूर्ति किए गए चयनकर्ता (यानी .show_opt_menu) का उपयोग करके बुलबुले तत्वों की श्रृंखला को फ़िल्टर करने का निर्णय लेने से पहले .dropdown-menu तक बुलबुले घटनाओं के लिए सुनता है। यह तब आपके फ़ंक्शन को किसी मिलान किए गए तत्व पर लागू करता है जिसने ईवेंट का कारण बनता है। यह पसंदीदा तरीका है (विशेष रूप से यदि आपके पास गतिशील सामग्री है)।

दूसरा व्यक्तिगत तत्वों पर एक मानक घटना श्रोता है और कई ईवेंट हैंडलर कनेक्ट होने का कारण बनता है। इस कोड को चलाने के समय तत्व मौजूद होना चाहिए (जैसा कि घटना होती है) के विपरीत। http://api.jquery.com/delegate/:

पिछले के रूप में पहली, लेकिन कम पठनीय और on द्वारा आधिकारिक तौर पर superceded किया गया है एक ही है "jQuery 1.7 के रूप में, .delegate() विधि .on() ने ले लिया है पहले के संस्करणों के लिए। हालांकि, यह घटना प्रतिनिधिमंडल का उपयोग करने का सबसे प्रभावी माध्यम है "

पहले दो विकल्पों में से, मेरी व्यक्तिगत वरीयताओं को हमेशा प्रतिनिधि ईवेंट हैंडलर का उपयोग अधिक कुशल होने के लिए करना है। लेकिन, जैसा कि इस उदाहरण का उद्देश्य click घटनाओं के लिए है, किसी भी समाधान के बीच गति अंतर नगण्य है (जब तक आप प्रति सेकंड 50,000 बार क्लिक नहीं कर सकते)। :)

Answer 3

।प्रतिनिधि()

रूट तत्वों के एक विशिष्ट सेट के आधार पर, अब या भविष्य में one or more events for all elements that match the selector पर एक हैंडलर संलग्न करें।

.delegate() .on() विधि

Answer 4

$(".dropdown-menu").on("click", ".show_opt_menu", function() { 
alert("hello"); 
}); 

इस समारोह क्लिक करें घटना देता .dropdown-मेनू में कार्यान्वित जब लक्ष्य तत्व .show_opt_menu है ने ले लिया है यानी जब आप गतिशील रूप से जोड़ने एक और .show_opt_menu क्लिक फ़ंक्शन संलग्न करने की आवश्यकता नहीं है। माता-पिता क्लिक एक्शन के लिए ज़िम्मेदार है।

$(".dropdown-menu .show_opt_menu").on("click", function() { 
alert("hello"); 
}); 

इस समारोह क्लिक करें घटना तो .show_opt_menu जब आप गतिशील रूप से नई .show_opt_menu आपको लगता है कि करने के लिए अलग से घटना साथ जोड़ने की आवश्यकता जोड़ने जुड़ जाता है।

$(".dropdown-menu").delegate(".show_opt_menu", "click", function() { 
alert("Delegate"); 
}); 

का एक ही उद्देश्य