`On` और` live` या `bind` में क्या अंतर है?

172

JQuery v1.7 में एक नया तरीका onजोड़ा गया था। प्रलेखन से:

'.On () विधि ईवेंट हैंडलर्स को वर्तमान में jQuery ऑब्जेक्ट में तत्वों के चयनित सेट से जोड़ देती है। JQuery 1.7 के रूप में, .on () विधि ईवेंट हैंडलर संलग्न करने के लिए आवश्यक सभी कार्यक्षमता प्रदान करता है। '

साथ क्या अंतर है liveऔर bind?

jquery

— डिएगो
स्रोत

5

संबंधित : jQuery .live () और .on () के बीच क्या अंतर है

— फेलिक्स क्लिंग

पूछने से पहले कुछ ऐसा था और सफल नहीं हुआ। धन्यवाद!

— डिएगो

329

on()jQuery के अधिकांश इवेंट फ़ंक्शंस को एक में विलय करने का प्रयास है। इसमें liveबनाम के साथ अक्षमताओं को ध्यान में रखते हुए जोड़ा गया बोनस है delegate। JQuery के भविष्य के संस्करणों में, इन विधियों को हटा दिया जाएगा और केवल onऔर oneछोड़ दिया जाएगा।

उदाहरण:

// Using live()
$(".mySelector").live("click", fn);

// Equivalent `on` (there isn't an exact equivalent, but with good reason)
$(document).on("click", ".mySelector", fn);

// Using bind()
$(".mySelector").bind("click", fn);

// Equivalent `on`
$(".mySelector").on("click", fn);

// Using delegate()
$(document.body).delegate(".mySelector", "click", fn);

// Equivalent `on`
$(document.body).on("click", ".mySelector", fn);

आंतरिक रूप से, jQuery इन सभी तरीकों और शॉर्टहैंड ईवेंट हैंडलर के नक्शे को तय करता on()है, आगे संकेत करता है कि आपको इन तरीकों को अभी से अनदेखा करना चाहिए और बस उपयोग करना चाहिए on:

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

Https://github.com/jquery/jquery/blob/1.7/src/event.js##965 देखें ।

— एंडी ई
स्रोत

जैसा @JamWaffles ने सबसे अधिक समझा जाने वाला उत्तर बताया। क्या आप कृपया उत्तर पूरा करने के लिए और प्रतिनिधि के बीच तुलना जोड़ सकते हैं? धन्यवाद!

— डिएगो

lols, आपने jquery स्रोत को मुझसे 4 सेकंड पहले जोड़ा: D btw लाइव समतुल्य दस्तावेज़ है, दस्तावेज़ नहीं। कोई भी

— Esailija

1

आप इसके बजाय 1.7 टैग का उल्लेख करना चाह सकते हैं, अन्यथा भविष्य में होने वाले परिवर्तन आपके लिंक को अमान्य बना सकते हैं (सही स्थान पर इंगित नहीं): github.com/jquery/jquery/blob/1.7/src/event.js##96565

— फेलिक्स क्लिंग

3

$(document.body).delegate("click", ".mySelector", fn);होना चाहिए$(document.body).delegate(".mySelector", "click", fn);

— सोनी

2

@dsdsdsdsd, बंद अनबाइंड, छोड़ देना और undelegate के लिए सामान्य स्थानापन्न के रूप में कार्य करता है।

— एंडी ई

12

onप्रकृति के बहुत करीब है delegate। तो क्यों नहीं प्रतिनिधि का उपयोग करें? यह है क्योंकि onअकेले नहीं आता है। वहाँ off, अनबाइंड घटना के लिए और oneएक घटना बनाने के लिए केवल एक बार निष्पादित किया जाना है। यह एक नए ईवेंट का "पैकेज" है।

मुख्य समस्या liveयह है कि यह "विंडो" से जुड़ता है, पृष्ठ संरचना (डोम) के अंदर एक तत्व पर एक क्लिक इवेंट (या अन्य घटना) को मजबूर करता है, एक घटना खोजने के लिए पृष्ठ के शीर्ष पर "बबल अप" करने के लिए हैंडलर इससे निपटने के लिए तैयार है। प्रत्येक स्तर पर, सभी ईवेंट हैंडलर्स जांच की जानी है, यह बड़ी तेज़ी से बढ़ सकते हैं, आप गहरी imbrication करते हैं ( <body><div><div><div><div><table><table><tbody><tr><td><div><div><div><ul><li><button> etc etc etc...)

इसलिए, अन्य शॉर्टकट इवेंट बाइंडर्स की bindतरह click, सीधे इवेंट टारगेट से जुड़ जाते हैं। यदि आपके पास एक तालिका है, तो मान लें कि 1000 लाइनें और 100 कॉलम हैं, और 100'000 कोशिकाओं में से प्रत्येक में एक चेकबॉक्स शामिल है, जिसे आप संभालना चाहते हैं। 100'000 ईवेंट हैंडलर संलग्न करने में पेज लोड होने में बहुत समय लगेगा। तालिका स्तर पर एक घटना बनाना, और घटना प्रतिनिधिमंडल का उपयोग करना परिमाण के कई आदेश अधिक कुशल हैं। ईवेंट लक्ष्य को इवेंट निष्पादन समय पर पुनर्प्राप्त किया जाएगा। " this" तालिका होगा, लेकिन " event.target" अपने सामान्य हो जाएगा " thisएक में" clickसमारोह। अब इसके साथ अच्छी बात यह onहै कि " this" हमेशा ईवेंट टारगेट होगा, न कि उस कंटेनर से जो जुड़ा हुआ है।

— roselan
स्रोत

क्या प्रतिनिधि प्रतिनिधि नहीं आता है?

— डेववेल्ले

1

हाँ। अच्छी जगह। आप हर रोज सीखते हैं;) (2011 से

— डॉके

5

साथ .onविधि यह करने के लिए संभव है .live, .delegateऔर .bindएक ही समारोह के साथ, लेकिन साथ .live()ही .live()संभव (दस्तावेज़ पर ईवेंट सौंपने) है।

jQuery("#example").bind( "click", fn ) = jQuery( "#example").on( "click", fn );

jQuery("#example").delegate( ".examples", "click", fn ) = jQuery( "#example" ).on( "click", ".examples", fn )

jQuery("#example").live( fn ) = jQuery( document ).on( "click", "#example", fn )

मैं सीधे jQuery स्रोत से इसकी पुष्टि कर सकता हूं:

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

jQuery (this.context)? this.context=== documentज्यादातर मामलों में

— Esailija
स्रोत

3

(प्रश्न को बदलने से पहले मेरे शुरुआती वाक्य ने और अधिक समझ बना ली। मूल रूप से आपने कहा था "क्या अंतर है live?"

onजैसा है उससे delegateकहीं अधिक है live, यह मूल रूप से एक एकीकृत रूप है bindऔर delegate(वास्तव में, टीम ने कहा कि इसका उद्देश्य "... घटनाओं को दस्तावेज़ में संलग्न करने के सभी तरीकों को एकजुट करना है ..." )।

liveमूल रूप से on(या delegate) संपूर्ण रूप से दस्तावेज़ में संलग्न है। यह उपयोग करने के पक्ष में v1.7 के रूप में पदावनत हैon या delegate। आगे बढ़ते हुए, मुझे संदेह है कि हम कोड का onउपयोग bindया delegate(या live) के बजाय पूरी तरह से उपयोग करेंगे ...

तो व्यवहार में, आप कर सकते हैं:

उपयोग की onतरह bind:

/* Old: */ $(".foo").bind("click", handler);
/* New: */ $(".foo").on("click", handler);

का प्रयोग करें onकी तरह delegate(घटना एक दिया तत्व में निहित प्रतिनिधिमंडल):
```
/* Old: */ $("#container").delegate(".foo", "click", handler);
/* New: */ $("#container").on("click", ".foo", handler);
```
का प्रयोग करें onकी तरह live(घटना दस्तावेज़ में निहित प्रतिनिधिमंडल):
```
/* Old: */ $(".foo").live("click", handler);
/* New: */ $(document).on("click", ".foo", handler);
```

— टीजे क्राउडर
स्रोत

1

मैंने जो पेज लिंक किया है उसमें कहा गया है कि "यदि नए HTML को पेज में इंजेक्ट किया जा रहा है, तो नए HTML में पेज में डालने के बाद एलिमेंट्स और अटैच इवेंट हैंडलर्स को सेलेक्ट करें। या, किसी इवेंट हैंडलर को अटैच करने के लिए डेलिगेट इवेंट्स का उपयोग करें, जैसा कि आगे वर्णित है।" । इसलिए, अधिक संभावना है बाँध, नहीं रहते हैं। क्या मैं सही हू?

— डिएगो

@Diego: onका एक संयोजन है bindऔर delegate, और जैसा कि मैंने कहा, बहुत ज्यादा नहीं की तरह live। आप onजैसे bind(किसी हैंडलर को सीधे किसी तत्व से जोड़ सकते हैं) का उपयोग कर सकते हैं, या आप का उपयोग कर सकते हैं ( onजैसे delegateकिसी हैंडलर को किसी तत्व से जोड़ते हैं, लेकिन घटना को तब ही फायर करें जब क्लिक किया गया वास्तविक तत्व किसी चयनकर्ता से मेल खाता हो, और जैसे कि वह तत्व एक था ईवेंट हुआ - उदाहरण के लिए, ईवेंट प्रतिनिधिमंडल), या आप इसका उपयोग कर सकते हैं live( जैसे delegateरूट के रूप में दस्तावेज़ का उपयोग करके)। यदि आप गतिशील रूप से तत्वों को जोड़ रहे हैं तो यह इवेंट डेलिगेशन है जो इसे उपयोगी बनाता है।

— TJ Crowder

1

पुराने लाइव को डेलिगेट की तरह भी इस्तेमाल किया जा सकता है: $("#id", ".class").live(fn)= $(".class").delegate("#id", fn );दरअसल पुराने jQuery स्रोत में वे सामान्य केस के रूप में रहते थे और एक विशेष केस के रूप में डेलिगेट करते थे, जिसके बारे में सोचते ही यह सब और अधिक भ्रमित कर देता था।

— एस्लेइज़ा

@Esailija: काफी साफ है। मुझे नहीं लगता कि इसका उपयोग इसके लिए जाना जाता है, क्योंकि उन्होंने delegateसही त्वरित जोड़ा , लेकिन अभी भी। :-)

— टीजे क्राउडर

2

जियो अब .on () के लिए शॉर्टकट है

//from source http://code.jquery.com/jquery-1.7.js
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
}

यह पोस्ट आपके लिए उपयोगी हो सकती है http://blog.jquery.com/2011/11/03/jquery-1-7-released/

— doochik
स्रोत

2

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

$( '#element' ).bind( 'click', handler );
$( '#element' ).on( 'click', handler );

.on () भी इवेंट डेलिगेशन कर सकता है, और पसंद किया जाता है।

.bind () वास्तव में .on () के लिए अब केवल एक उपनाम है। यहाँ 1.7.1 में बाइंड फ़ंक्शन की परिभाषा है

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},

जोड़ने के लिए .on () एक बाध्यकारी इवेंट के लिए कई फ़ंक्शन होने के बजाय एक एकीकृत ईवेंट API बनाना था; .on () की जगह .bind (), .live () और .delegate ()।

— सज्जन
स्रोत

0

कुछ तो आपको इस बात से अवगत होना चाहिए कि क्या आप इवेंट हैंडलर को तत्व से जोड़ना चाहते हैं - ध्यान दें कि हैंडलर किस तत्व से जुड़ा था!

उदाहरण के लिए, यदि आप उपयोग करते हैं:

$('.mySelector').bind('click', fn);

आपको इवेंट हैंडलर का उपयोग करना होगा:

$('.mySelector').data('events');

लेकिन अगर आप उपयोग करते हैं:

$('body').on('click', '.mySelector', fn);

आपको इवेंट हैंडलर का उपयोग करना होगा:

$('body').data('events');

(अंतिम स्थिति में संबंधित ईवेंट ऑब्जेक्ट में चयनकर्ता = "। mySelector" होगा)

— सिकंदर
स्रोत

eventsकिसी भी तरह से अनिर्दिष्ट है और मुझे लगता है कि यह अब 1.9 में काम नहीं करता है

— जॉन ड्वोरक

सही। नए संस्करणों में डेटा के बजाय _data का उपयोग किया जा सकता है। उत्तर "ईवेंट स्वामी" में अंतर के बारे में था, बल्कि पुराने या नए संस्करणों के लिए सटीक वाक्यविन्यास के बारे में। विभिन्न JQuery संस्करणों के लिए सटीक सिंटैक्स के बारे में अन्य पोस्ट हैं। उदाहरण के लिए stackoverflow.com/questions/2518421/…

— अलेक्जेंडर