जावास्क्रिप्ट के addEventListener विधि के बराबर jQuery

Question

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

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

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

$(document).click(select_element);

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

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

Comments

इवेंट कैप्चरिंग jQuery द्वारा समर्थित नहीं है, क्योंकि इवेंट कैप्चरिंग IE द्वारा समर्थित नहीं है, जो jQuery समर्थन करता है?) क्या आप IE संगतता की तलाश कर रहे हैं?

— वर्धमान ताजा

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

— जंगल

Answer 1

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

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

Comments

ऐसा लगता है कि IE9 अंत में इसका समर्थन करता है। blogs.msdn.com/b/ie/archive/2010/03/26/…

— कुछ

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

— आकाश

बस स्पष्ट होने के लिए, आप कह रहे हैं कि ओपी जो चाहता है वह संभव नहीं है - कि आपको बबलिंग का उपयोग करना है, और कैप्चरिंग का उपयोग नहीं कर सकते। सही?

— नौमेनन

Answer 2

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

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

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

प्रलेखन पृष्ठ http://api.jquery.com/on/ पर स्थित है

Comments

इसे संबोधित करने के लिए स्वीकृत उत्तर को संपादित किया गया है।

— उपयोगकर्ता जो

Answer 3

निकटतम कार्य बाइंड फ़ंक्शन होगा:

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

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

Answer 4

एक बात का ध्यान रखें कि jQuery इवेंट मेथड में टैग loadपर फायर / ट्रैप नहीं embedहोता है जिसमें SVG DOM होता है जो embedटैग में एक अलग डॉक्यूमेंट के रूप में लोड होता है । जिस तरह से मुझे loadइन पर एक घटना फंसाने का एकमात्र तरीका कच्चे जावास्क्रिप्ट का उपयोग करना था।

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

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

हालाँकि, यह काम करता है:

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

Comments

यह ध्यान दिया जाना चाहिए कि यह सही तरीका है यदि आप तत्व के लिए किसी अन्य बाध्य घटना संचालकों को अधिलेखित नहीं करने का इरादा रखते हैं।

— r3wt

क्या है $img?

— अनातोल

Answer 5

अब आपको .on()फ़ंक्शन का उपयोग घटनाओं को बांधने के लिए करना चाहिए ।

Answer 6

$( "button" ).on( "click", function(event) {

    alert( $( this ).html() );
    console.log( event.target );

} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button>test 1</button>
<button>test 2</button>

Answer 7

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

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

यहाँ उपरोक्त उपचार में एक लिंक से घटना के प्रवाह की चर्चा है:

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

कुछ मुख्य बिंदु हैं:

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