jQuery का .bind () बनाम .on ()

Question

मुझे नए समारोह के बारे में बात करते हुए दो महान लेख मिले .on(): jquery4u.com , elijahmanor.com ।

क्या कोई तरीका है जहां .bind()अभी भी उपयोग करने से बेहतर है .on()?

उदाहरण के लिए, मेरे पास एक नमूना कोड है जो इस तरह दिखता है:

$("#container").click( function( e ) {} )

आप यह नोट कर सकते हैं कि मेरे पास चयनकर्ता द्वारा प्राप्त एक वस्तु है और मेरे मामले में, मेरा पृष्ठ लोड होने पर <div>नाम #containerपहले से मौजूद है; गतिशील रूप से नहीं जोड़ा गया। यह उल्लेख करना महत्वपूर्ण है कि मैं jQuery के नवीनतम संस्करण का उपयोग करता हूं: 1.7.2।

उस नमूने के लिए, .on()इसके बजाय इसका उपयोग किया जाना चाहिए, .bind()भले ही मैं .on()फ़ंक्शन द्वारा प्रदान की गई अन्य विशेषताओं का उपयोग न करूं ?

Comments

वह दूसरा लेख बकवास है। यह कहता है कि .bind()कई तत्वों को बाँधने के लिए कितना बुरा है, लेकिन यह उल्लेख करने में विफल रहता है कि .on()बाध्यकारी मोड में कैसे उपयोग किया जाता है।

— अलनीतक 13

Answer 1

आंतरिक रूप से, jQuery के वर्तमान संस्करण में .bindसीधे मैप करता है .on। (उसी के लिए जाता है .live।) तो एक छोटे लेकिन व्यावहारिक रूप से तुच्छ प्रदर्शन है अगर आप .bindइसके बजाय का उपयोग करें ।

हालाँकि, .bindभविष्य के संस्करणों से किसी भी समय हटाया जा सकता है। इसके बजाय उपयोग करने के लिए .bindऔर हर कारण को प्राथमिकता देने का कोई कारण नहीं है .on।

Comments

संभवतः - उन्हें हटाने का बहुत कम कारण है, क्योंकि वे किसी मौजूदा फ़ंक्शन को मैप करते हैं। दूसरी ओर, एक प्रमुख संस्करण संख्या द्वारा अपग्रेड करने का मतलब है कि आप एपीआई के बारे में कुछ भी कर सकते हैं, क्योंकि उस बिंदु पर बैकवर्ड संगतता आवश्यक नहीं है। मैं तो बस कह रहा हूं'।

— ब्लेज़ेमॉन्गर

@Esailija वे सभी कार्य विशिष्ट प्रकार के अतुल्यकालिक अनुरोधों से निपटने के लिए उपयोगी शॉर्टकट प्रदान करते हैं। .bindऔर .onगैर-प्रत्यायोजित घटनाओं के लिए समान हैं; .bindशॉर्टकट के किसी भी प्रकार प्रदान नहीं करता है की तरह $.getJSONकरता है

— jackwanders

@jbabey, तकनीकी रूप से सही है, जबकि यह है कि वे जरूरी नहीं कि कोई कार्यों को दूर नहीं करते हैं, वे अभी भी विरोध करते उन्हें और आप उन्हें उपयोग करने के लिए नहीं की सलाह। भविष्य में वे हमेशा उन्हें पूरी तरह से हटाने का फैसला कर सकते थे (जिस तरह से उन्होंने कुछ IE समर्थन को संस्करण 2.x के रूप में हटा दिया था)। पदावनत किए गए कार्यों का उपयोग नहीं किया जाना चाहिए।

— हन्ना

मुद्रण "jQuery.fn.bind.toString ()" आउटपुट "फ़ंक्शन (ए, बी, सी) {यह वापस लौटाएँ। (ए, नल, बी, सी)}"

— जोवेन

बाँध और अनबाइंड jQuery 3. के रूप में अनुचित हैं

— जो माबेल

Answer 2

ये स्निपेट सभी एक ही कार्य करते हैं:

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

हालांकि, वे इन सबसे अलग हैं, जो सभी एक ही कार्य करते हैं:

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

इवेंट हैंडलर का दूसरा सेट इवेंट डेलिगेशन का उपयोग करता है और गतिशील रूप से जोड़े गए तत्वों के लिए काम करेगा। इवेंट हैंडलर जो प्रतिनिधिमंडल का उपयोग करते हैं, वे बहुत अधिक प्रदर्शनकारी हैं। पहला सेट गतिशील रूप से जोड़े गए तत्वों के लिए काम नहीं करेगा, और प्रदर्शन के लिए बहुत खराब हैं।

jQuery का on()फ़ंक्शन किसी भी नई कार्यक्षमता को प्रस्तुत नहीं करता है जो पहले से मौजूद नहीं था, यह सिर्फ jQuery में इवेंट हैंडलिंग को मानकीकृत करने का एक प्रयास है (आपको अब लाइव, बाइंड या डेलिगेट के बीच फैसला नहीं करना होगा)।

Comments

मुझे लगता है कि आपका मतलब यह है कि आप $('selector').live('click', function () { ... });परिणाम को लगभग समान के रूप में रखते हैं।

— .lrc

Answer 3

प्रत्यक्ष तरीके और उनसे .delegateबेहतर एपीआई हैं .onऔर उन्हें अपदस्थ करने का कोई इरादा नहीं है।

प्रत्यक्ष विधियां बेहतर हैं क्योंकि आपका कोड कम कड़ाई से टाइप किया जाएगा। मौन बग के बजाय किसी इवेंट का नाम गलत लिखने पर आपको तत्काल त्रुटि मिलेगी। मेरी राय में, लिखना और पढ़ना भी आसान clickहैon("click"

.delegateसे बेहतर है .onतर्क के आदेश की वजह से:

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

आप जानते हैं कि इसे सही रूप में प्रत्यायोजित किया गया है, क्योंकि यह प्रतिनिधि कहता है। आप भी तुरंत चयनकर्ता को देखें।

साथ .onयह तुरंत स्पष्ट नहीं कर रहा है, तो यह और भी सौंप रहा है और आप चयनकर्ता के लिए अंत में देखो करने के लिए है:

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

अब, नामकरण .bindवास्तव में भयानक है और अंकित मूल्य से भी बदतर है .on। लेकिन .delegateगैर-प्रत्यायोजित घटनाएँ नहीं कर सकते हैं और ऐसी घटनाएँ होती हैं जिनका कोई प्रत्यक्ष तरीका नहीं होता है, इसलिए इस तरह के एक दुर्लभ मामले में इसका उपयोग किया जा सकता है, लेकिन केवल इसलिए कि आप प्रत्यायोजित और गैर-प्रत्यायोजित घटनाओं के बीच एक स्वच्छ अलगाव बनाना चाहते हैं।

Comments

JQuery 3.0 के रूप में, .delegate () को हटा दिया गया है।

— मंद

Answer 4

यदि आप अपने लिए सोर्स कोड देखते हैं $.fn.bindतो पाएंगे कि यह केवल एक पुनर्लेखन समारोह है on:

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

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

Answer 5

JQuery के दस्तावेज़ से:

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

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

Comments

ध्यान रखें, दस्तावेज़ीकरण की सलाह उसी टीम से है जो आपको बाँध, क्लिक, लाइव, डेलीगेट ... और परिणामी भ्रम की स्थिति में लाए। इस मुद्दे पर कई साइटों को पढ़ने के बाद, मेरी राय यह है कि सबसे अच्छी और सटीक साइटें वही हैं जो 'पर' का वर्णन "चीनी-कोटिंग" के रूप में करती हैं, चीनी कीड़े को आकर्षित करती हैं, और प्रतिनिधि जाने का रास्ता है।

— डेववले 16

Answer 6

Jquery 3.0 और उससे अधिक .bind के रूप में पदावनत किया गया है और वे इसके बजाय .on का उपयोग करना पसंद करते हैं। जैसा कि @Blazemonger ने पहले उत्तर दिया था कि इसे हटाया जा सकता है और यह सुनिश्चित करने के लिए कि इसे हटा दिया जाएगा। पुराने संस्करणों के लिए .bind आंतरिक रूप से .on भी कॉल करेगा और उनके बीच कोई अंतर नहीं है। कृपया अधिक विस्तार के लिए एपीआई भी देखें।

.bind के लिए jQuery एपीआई प्रलेखन ()