2010-10-07 5 views
6

.Delegate() और live() के बीच क्या अंतर है?

$("table").delegate("td", "hover", function(){ 
    $(this).toggleClass("hover"); 
}); 

xlx25 के अनुसार .live():

$("table").each(function(){ 
    $("td", this).live("hover", function(){ 
     $(this).toggleClass("hover"); 
    }); 
}); 

का उपयोग करके लिखे गए निम्नलिखित कोड के बराबर है।

मुझे यकीन है कि मैं गलत हूं लेकिन यह

$("table td").live('hover', function() {}); 

लिखने जैसा नहीं है तो, .delegate() क्या है?

+0

[jQuery: लाइव() बनाम प्रतिनिधि()] के संभावित डुप्लिकेट (http://stackoverflow.com/questions/4204316/jquery-live-vs-delegate) –

उत्तर

4

.live()document पर सुनता है जहां के रूप में .delegate(), एक और अधिक स्थानीय तत्व पर सुनता है उस मामले में <table>

वे दोनों घटनाओं के लिए समान रूप से सुनते हैं, एक .delegate() पकड़े जाने से पहले बस बुलबुले।

का आपका उदाहरण:

$("table td").live('hover', function() {}); 

के रूप में यह फिर से document और नहीं <table> के लिए एक ईवेंट हैंडलर देता है, वही नहीं है, इसलिए .delegate() अधिक स्थानीय तत्वों, अधिकांश मामलों में और अधिक कुशल के लिए है .. हालांकि यह अभी भी कवर के तहत .live() का उपयोग करता है।


यह भी ध्यान रखें कि $(selector) तत्वों प्राप्त करता है, तो $("table td") कोई अच्छे कारण के लिए वास्तव में तत्वों का एक गुच्छा का चयन करता है जब .live(), जहां $("table").delegate() रूप केवल<table> तत्वों का चयन करता है का उपयोग करते हुए, तो भी शुरू में यह और अधिक कुशल है चयनकर्ता नहीं चलाकर और परिणाम को छोड़कर।

+0

क्या क्रोम पर ईवेंट श्रोता देखना संभव है संबंधित तत्व का चयन करते समय डेवलपर उपकरण? –

+0

हालांकि '$ (" तालिका टीडी ")। लाइव ('होवर', फ़ंक्शन() {});' .each() 'विधि का उपयोग करते समय वही है, है ना? –

+0

तत्व पर आप '.delegate() 'से हां संलग्न करते हैं, आप इसे' .data (" events ") 'ऑब्जेक्ट, या' $ .cache [element [$। Expando]] में देख सकते हैं। ईवेंट', जहां 'elemenet [$। expando]' तत्व है जो आप देखते हैं 'jquery230420498204824 = 132', कि 132' $। कैश 'में कुंजी है, इसलिए '$ .cache [132] .events' वह ऑब्जेक्ट है जो आप हैं बाद। –

0

डॉक:

के बाद से एक बार वे दस्तावेज़ के शीर्ष करने के लिए प्रचारित किया है .live() विधि घटनाओं संभालती है, यह लाइव ईवेंट के प्रसार को रोकने के लिए संभव नहीं है। इसी प्रकार, .delegate() द्वारा संचालित घटनाएं हमेशा उस तत्व के लिए प्रचारित होंगी, जिस पर उन्हें प्रतिनिधि दिया जाता है; इसके नीचे दिए गए किसी भी तत्व पर इवेंट हैंडलर पहले से ही प्रतिनिधि कार्यक्रम हैंडलर कहलाते समय निष्पादित किए जाएंगे।

5

रास्ता live() के कार्यों में इस डोम (दस्तावेज़) का पता लगाता है अपनी चुनी घटना उस स्तर तक बुलबुले (और फिर देखने के लिए अगर यह एक से फेंक दिया गया था जांचने पर के शीर्ष स्तर पर एक हैंडलर देता है तत्व जो आपके चयनकर्ता से मेल खाता है)।

delegate() वही तरीके से काम करता है, लेकिन हैंडलर आपके चयनित तत्व पर रखा जाता है (इसलिए यह केवल उस तत्व के वंशजों द्वारा फेंकने वाली घटनाओं का पता लगा सकता है)।

live() के डाउनसाइड्स 1) दस्तावेज़ स्तर पर बबल करने वाली सभी घटनाओं का पता लगाने और जांचने में निहित प्रदर्शन समस्याएं, और 2) तथ्य यह है कि आप उन घटनाओं पर प्रचार को रोक नहीं सकते हैं (क्योंकि आपने ' जब तक वे दस्तावेज़ स्तर तक नहीं पहुंच जाते तब तक उनके बारे में नहीं पता)।

delegate() उन दोनों मुद्दों को कम करता है जो आपको हैंडलर तत्वों (तत्वों जो आपके चयनकर्ता और उनके वंशजों से मेल खाते हैं) के बजाय पूरे पृष्ठ को बाधित करते हैं।

संबंधित मुद्दे