2010-03-07 15 views
158

मैं इस जावास्क्रिप्ट विधि कॉल की jQuery बराबर खोजने की कोशिश कर रहा हूँ की jQuery बराबर:जावास्क्रिप्ट का addEventListener विधि

document.addEventListener('click', select_element, true); 

मैं जहाँ तक मिल गया है:

$(document).click(select_element); 

लेकिन यह है कि 'नहीं करता है जावा परिणाम के अंतिम पैरामीटर के रूप में एक ही परिणाम प्राप्त नहीं करते हैं - एक बूलियन जो इंगित करता है कि ईवेंट हैंडलर को कैप्चरिंग या बबलिंग चरण में निष्पादित किया जाना चाहिए (http://www.quirksmode.org/js/events_advanced.html से मेरी समझ के अनुसार) - छोड़ दिया गया है।

मैं उस पैरामीटर को कैसे निर्दिष्ट करूं, या अन्यथा jQuery का उपयोग करके समान कार्यक्षमता प्राप्त करूं?

+3

घटना कैप्चरिंग jQuery द्वारा समर्थित नहीं है, घटना के रूप में कब्जा आईई द्वारा समर्थित नहीं है, जो jQuery समर्थन करता है;) क्या आप आईई संगतता की तलाश में हैं? –

+0

धन्यवाद, क्रिसेंट ताजा - मुझे लगता है कि अब समझ में आता है। मुझे आईई संगतता की आवश्यकता है इसलिए मुझे लगता है कि मुझे कैप्चरिंग चरण के बारे में भूलना होगा। – Bungle

उत्तर

116

नहीं सभी ब्राउज़रों समर्थन घटना पर कब्जा (उदाहरण के लिए, इंटरनेट एक्सप्लोरर संस्करण कम से कम 9 नहीं है), लेकिन सभी घटना का समर्थन करते हैं बुलबुले, यही कारण है कि यह चरण हैडलर को सभी क्रॉस-ब्राउज़र एब्स्ट्रैक्शन में ईवेंट करने के लिए बाध्य करता है, jQuery शामिल है।

आप jQuery में bind() (jQuery में on() ने ले 1.7+) उपयोग कर रहा है या समारोह-विशिष्ट jQuery तरीकों (इस मामले, click(), जो bind() आंतरिक रूप से वैसे भी कॉल में) के लिए क्या देख रहे के सबसे नजदीक। सभी एक उठाए गए घटना के बुलबुले चरण का उपयोग करें।

से http://api.jquery.com/bind/:

+0

धन्यवाद, Russ - यह एक अच्छा स्पष्टीकरण है। – Bungle

+6

ऐसा लगता है कि आईई 9 अंत में इसका समर्थन करता है। http://blogs.msdn.com/b/ie/archive/2010/03/26/dom-level-3-events-support-in-ie9.aspx – some

+0

और वे ईवेंट कैप्चरिंग का समर्थन क्यों नहीं करते? इवेंट कैप्चरिंग के डाउनसाइड्स क्या हैं? – Aakash

43

निकटतम बात बाँध समारोह होगा:

http://api.jquery.com/bind/

$('#foo').bind('click', function() { 
    alert('User clicked on "foo."'); 
}); 
+0

धन्यवाद, बेन! मैं इसकी सराहना करता हूं। – Bungle

101

jQuery 1.7 के रूप में, .on() अब बाध्यकारी घटनाओं का पसंदीदा तरीका है, बजाय .bind() है

jQuery 1.7 के रूप में, .on() विधि को प्राथमिकता दी है के लिए विधि दस्तावेज़ को ईवेंट हैंडलर संलग्न करना। पिछले संस्करणों के लिए, .bind() विधि का उपयोग इवेंट हैंडलर को सीधे तत्वों को जोड़ने के लिए किया जाता है। हैंडलर वर्तमान में चयनित तत्वों से jQuery ऑब्जेक्ट में संलग्न हैं, इसलिए उन तत्वों को बिंदु पर .bind() पर मौजूद होना चाहिए। अधिक लचीली घटना बाध्यकारी के लिए, .on() या .delegate() में ईवेंट प्रतिनिधिमंडल की चर्चा देखें।

प्रलेखन पेज http://api.jquery.com/on/

10

में स्थित है अब आप घटनाओं बाध्य करने के लिए .on() समारोह का उपयोग करना चाहिए।

1

यहां मानक जावास्क्रिप्ट के लिए इस मुद्दे का मोज़िला विकास नेटवर्क (MDN) पर एक उत्कृष्ट उपचार है (आप jQuery पर भरोसा करते हैं या इसे बेहतर ढंग से समझने सामान्य रूप में करना चाहते हैं नहीं है):

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

कुछ महत्वपूर्ण बिंदु हैं:: यहाँ ऊपर उपचार में एक लिंक से घटना प्रवाह की चर्चा है

  • यह एक घटना
  • यह आप चरण के महीन कुशल नियंत्रण जब श्रोता सक्रिय हो जाता है (बनाम उत्साह से भरा हुआ पर कब्जा)
  • यह किसी भी डोम तत्व पर काम करता है, नहीं देता है के लिए एक एकल हैंडलर की तुलना में अधिक जोड़ने की अनुमति देता है बस एचटीएमएल तत्व
  • घटना में पारित "इस" का मूल्य वैश्विक वस्तु (विंडो) नहीं है, लेकिन तत्व जिस से तत्व निकाल दिया गया है। यह बहुत सुविधाजनक है।
  • विरासत के लिए कोड आईई ब्राउज़रों सरल और शीर्षक "विरासत इंटरनेट एक्सप्लोरर और attachEvent"
  • आप मापदंडों यदि आप एक गुमनाम समारोह में हैंडलर लगा
12

एक बात ध्यान रखें कि है शामिल कर सकते हैं के अंतर्गत शामिल है jQuery घटना विधियों load पर embed टैग्स पर आग/जाल नहीं है जिसमें embed टैग में एक अलग दस्तावेज़ के रूप में लोड किया गया है। इन पर load ईवेंट को फँसाने का एकमात्र तरीका कच्चे जावास्क्रिप्ट का उपयोग करना था।

यह काम नहीं करेगा (मैं on/bind/load तरीकों की कोशिश की है):

$img.on('load', function() { 
    console.log('FOO!'); 
}); 

बहरहाल, यह काम करता है:

$img[0].addEventListener('load', function() { 
    console.log('FOO!'); 
}, false); 
+1

यह ध्यान दिया जाना चाहिए कि यदि आप तत्व (ओं) के लिए किसी अन्य बाध्य ईवेंट हैंडलर को ओवरराइट नहीं करना चाहते हैं तो यह सही तरीका है। – r3wt

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