jQuery: एक ही घटना के लिए एक से अधिक हैंडलर

137

यदि मैं एक ही तत्व के लिए दो ईवेंट हैंडलर को एक ही ईवेंट में बाँधता हूँ तो क्या होगा?

उदाहरण के लिए:

var elem = $("...")
elem.click(...);
elem.click(...);

क्या अंतिम हैंडलर "जीत" होता है, या दोनों हैंडलर चलाए जाएंगे?

javascript jquery event-handling

— तारों से उड़ना
स्रोत

168

दोनों हैंडलर चलेंगे, jQuery इवेंट मॉडल एक तत्व पर कई हैंडलर की अनुमति देता है, इसलिए बाद में हैंडलर पुराने हैंडलर को ओवरराइड नहीं करता है।

हैंडलर उस क्रम में निष्पादित करेंगे जिसमें वे बाध्य थे ।

— रस कैम
स्रोत

1

देशी तरीके से क्या होता है? और मूल कैसे जानता है कि किसी विशिष्ट को कैसे हटाया जाए?

— SuperUberDuper

1

DOM लेवल 3 (HTML 5 कल्पना का संदर्भ देते हुए) के अनुसार, इवेंट हैंडलर को उस क्रम में निष्पादित किया जाता है जिसमें वे पंजीकृत हैं - w3.org/TR/DOM-Level-3-Events/#event-phase और w3.org - TR/ 2014 / REC-html5-20141028 /… । इवेंट हैंडलर को उस हैंडलर के संदर्भ में पास करके हटाया जा सकता है जो पंजीकृत था

— Russ कैम

@RussCam क्या होता है यदि एक ही हैंडलर अधिक बाध्य होता है, तो एक बार बस कहने दें कि यह jQuery('.btn').on('click',handlerClick);वास्तव में बिना किसी के विभिन्न स्थानों पर कहा जाता है .off?

— techie_28

ध्यान दें कि jQueryUI widgetfactory विजेट्स के लिए, यह सच नहीं है यदि आप हैंडलर को एक विकल्प के रूप में सेट करते हैं। पुराने और नए हैंडलर दोनों को बुलाया जाएगा, इसके लिए आपको bindविधि का उपयोग करने की आवश्यकता है । विवरण के लिए इसे देखें: learn.jquery.com/jquery-ui/widget-factory/…

— माइकल शेपर

@MichaelScheper जवाब को संपादित करने और अतिरिक्त जानकारी के साथ अपडेट करने के लिए स्वतंत्र महसूस करता है

— रसेल कैम

36

मान लीजिए कि आपके दो हैंडलर हैं, एफ और जी , और यह सुनिश्चित करना चाहते हैं कि उन्हें एक ज्ञात और निश्चित क्रम में निष्पादित किया जाता है, तो बस उन्हें एनकैप्सुलेट करें:

$("...").click(function(event){
  f(event);
  g(event);
});

इस तरह से (jQuery के दृष्टिकोण से) केवल एक हैंडलर है, जो निर्दिष्ट क्रम में f और g को कॉल करता है।

— Stephan202
स्रोत

3

+1, एक फंक्शन के अंदर एनकैप्सुलेशन जाने का रास्ता है। और यहां तक कि बेहतर सशर्त तर्क को नियंत्रित करने वाली घटना को नियंत्रित करने के लिए हैंडलर फ़ंक्शन के अंदर समाहित किया जा सकता है।

— गॉर्डन पॉटर

हैंडलर का एक संग्रह जिसका क्रम प्रोग्राम निर्धारित है।

— एरोन ब्लेंकुश

17

jQuery के .bind () उस बाउंड्री में आग लगाता है :

जब कोई घटना किसी तत्व तक पहुँचती है, तो तत्व के लिए उस घटना प्रकार से बंधे सभी हैंडलर निकाल दिए जाते हैं। यदि कई हैंडलर पंजीकृत हैं, तो वे हमेशा उस क्रम में निष्पादित करेंगे जिसमें वे बाध्य थे। सभी हैंडलर निष्पादित होने के बाद, घटना सामान्य घटना प्रसार पथ के साथ जारी रहती है।

स्रोत: http://api.jquery.com/bind/

क्योंकि jQuery के अन्य कार्य (पूर्व .click()) के लिए शॉर्टकट हैं .bind('click', handler), मुझे लगता है कि वे भी उसी क्रम में ट्रिगर होते हैं जिस क्रम में वे बंधे हैं।

— allicarn
स्रोत

11

आपको अनुक्रम में घटनाओं को निष्पादित करने के लिए जंजीरों का उपयोग करने में सक्षम होना चाहिए, उदाहरण के लिए:

$('#target')
  .bind('click',function(event) {
    alert('Hello!');
  })
  .bind('click',function(event) {
    alert('Hello again!');
  })
  .bind('click',function(event) {
    alert('Hello yet again!');
  });

मुझे लगता है कि नीचे दिया गया कोड समान है

$('#target')
      .click(function(event) {
        alert('Hello!');
      })
      .click(function(event) {
        alert('Hello again!');
      })
      .click(function(event) {
        alert('Hello yet again!');
      });

स्रोत: http://www.peachpit.com/articles/article.aspx?p=1371947&seqNum/3

TFM यह भी कहता है:

जब कोई घटना किसी तत्व तक पहुँचती है, तो तत्व के लिए उस घटना प्रकार से बंधे सभी हैंडलर निकाल दिए जाते हैं। यदि कई हैंडलर पंजीकृत हैं, तो वे हमेशा उस क्रम में निष्पादित करेंगे जिसमें वे बाध्य थे। सभी हैंडलर निष्पादित होने के बाद, घटना सामान्य घटना प्रसार पथ के साथ जारी रहती है।

— anddoutoi
स्रोत

1

न तो वह कोड और न ही वह लेख हैंडलर निष्पादन के आदेश को परिभाषित करता है। हां, यही वह क्रम है, जिससे ईवेंट बाइंडिंग होगी, लेकिन ईवेंट हैंडलर्स को जो ऑर्डर मिलता है, वह अभी भी आधिकारिक रूप से अपरिभाषित है।

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

ehh? क्या होगा "अब जब क्लिक ईवेंट होता है, तो पहले ईवेंट हैंडलर को बुलाया जाएगा, उसके बाद दूसरा, तीसरे के बाद।" अस्पष्ट है

— anddoutoi

और हां, मुझे पता है कि आधिकारिक आरईएस इसे परिभाषित नहीं करते हैं और पीपीके ने पहले ही साबित कर दिया है कि घटना का निष्पादन यादृच्छिक है, लेकिन शायद jQuery ने यह तय किया है ^ ^

— anddoutoi

आह, उस वाक्य को याद किया। वास्तव में, लेखक गलत है। jQuery ने इसे "निश्चित" नहीं किया है। क्योंकि युक्ति औपचारिक रूप से आदेश को परिभाषित नहीं करता है, तकनीकी रूप से कुछ भी ठीक करने की आवश्यकता नहीं है।

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

5

@CrescentFresh: इस तरह के एक देर से जवाब के लिए क्षमा करें, मैं सिर्फ सवाल देखा था, लेकिन मैं आपको लिंक करने के लिए इंगित करना चाहूंगा , यह jQuery का आधिकारिक दस्तावेज है और यह स्पष्ट रूप से कहता है कि

When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound. After all handlers have executed, the event continues along the normal event propagation path.

— Razort4x

2

दोनों हैंडलर बुलाए जाते हैं।

आप इनलाइन ईवेंट बाइंडिंग (जैसे "onclick=...") के बारे में सोच रहे होंगे , जहां एक बड़ी खामी केवल एक हैंडलर द्वारा ईवेंट के लिए सेट की जा सकती है।

jQuery डोम स्तर 2 इवेंट पंजीकरण मॉडल के अनुरूप है :

DOM इवेंट मॉडल एक EventTarget पर कई ईवेंट श्रोताओं के पंजीकरण की अनुमति देता है। इसे प्राप्त करने के लिए, इवेंट श्रोताओं को अब विशेषता मान के रूप में संग्रहीत नहीं किया जाता है

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

@ रीच: आदेश आधिकारिक तौर पर अपरिभाषित है।

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

2

इसे 2 विधियों का उपयोग करके सफलतापूर्वक काम किया: स्टेफ़न202 के एनकैप्सुलेशन और कई इवेंट श्रोताओं। मेरे पास 3 खोज टैब हैं, आइए उनके इनपुट टेक्स्ट आईडी को एक ऐरे में परिभाषित करें:

var ids = new Array("searchtab1", "searchtab2", "searchtab3");

जब searchtab1 की सामग्री बदलती है, तो मैं searchtab2 और searchtab3 को अपडेट करना चाहता हूं। क्या इसने एनकैप्सुलेशन के लिए इस तरह किया:

for (var i in ids) {
    $("#" + ids[i]).change(function() {
        for (var j in ids) {
            if (this != ids[j]) {
                $("#" + ids[j]).val($(this).val());
            }
        }
    });
}

एकाधिक घटना श्रोता:

for (var i in ids) {
    for (var j in ids) {
        if (ids[i] != ids[j]) {
            $("#" + ids[i]).change(function() {
                $("#" + ids[j]).val($(this).val());
            });
        }
    }
}

मुझे दोनों तरीके पसंद हैं, लेकिन प्रोग्रामर ने इनकैप्सुलेशन चुना, हालांकि कई इवेंट श्रोताओं ने भी काम किया। हमने इसका परीक्षण करने के लिए क्रोम का उपयोग किया।

— GeneralElektrix
स्रोत

1

इस बात की गारंटी है कि एक हैंडलर एक के बाद एक होता है: दूसरे हैंडलर को किसी एलिमेंट के साथ अटैच करें और ईवेंट को बबल दें। कंटेनर से जुड़े हैंडलर में, आप event.target को देख सकते हैं और कुछ कर सकते हैं यदि यह वह है जिसमें आप रुचि रखते हैं।

क्रूड, हो सकता है, लेकिन यह निश्चित रूप से काम करना चाहिए।

— डेविड
स्रोत

0

jquery दोनों हैंडलर को निष्पादित करेगा क्योंकि यह कई ईवेंट हैंडलर को अनुमति देता है। मैंने नमूना कोड बनाया है। आप इसे आज़मा सकते हैं

डेमो

— विक्रम राजपूत
स्रोत