jQuery এর .bind () বনাম .অন ()


207

আমি নতুন ফাংশন সম্পর্কে কথা বলার দুটি দুর্দান্ত নিবন্ধ পেয়েছি .on(): jquery4u.com , elijahmanor.com

.bind()এখনও কোন উপায় আছে যেখানে এখনও ব্যবহার করা ভাল .on()?

উদাহরণস্বরূপ, আমার কাছে একটি নমুনা কোড রয়েছে যা দেখতে এই জাতীয় দেখাচ্ছে:

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

আপনি খেয়াল করতে পারেন যে নির্বাচক দ্বারা আমার কেবল একটি আইটেম উদ্ধার করা হয়েছে এবং আমার ক্ষেত্রে <div>নামটি #containerইতিমধ্যে উপস্থিত রয়েছে যখন আমার পৃষ্ঠাটি লোড করা হয়েছিল; গতিশীলভাবে যোগ করা হয়নি। আমি jQuery এর সর্বশেষতম সংস্করণটি ব্যবহার করছি তা উল্লেখ করা গুরুত্বপূর্ণ: 1.7.2।

সেই নমুনার জন্য, আমি যদি ফাংশন দ্বারা সরবরাহিত অন্যান্য বৈশিষ্ট্যগুলি না ব্যবহার করি তার .on()পরিবর্তে ব্যবহার করা উচিত ?.bind().on()


5
যে দ্বিতীয় নিবন্ধ জঞ্জাল হয়। এটি বলে যে .bind()একাধিক উপাদানকে বাঁধার জন্য কীভাবে খারাপ, তবে .on()যখন বাইন্ডিং মোডে ব্যবহৃত হয় ঠিক একই জিনিসটি কীভাবে হয় তা উল্লেখ করতে ব্যর্থ হয় ।
Alnitak

উত্তর:


316

অভ্যন্তরীণভাবে, .bindসরাসরি .onjQuery এর বর্তমান সংস্করণে মানচিত্র । (একই ক্ষেত্রে এটি হয় .live)) সুতরাং আপনি যদি এর .bindপরিবর্তে ব্যবহার করেন তবে একটি ছোট্ট কিন্তু ব্যবহারিকভাবে নগণ্য পারফরম্যান্স হিট হবে।

তবে, .bindযে কোনও সময় ভবিষ্যতের সংস্করণগুলি থেকে সরানো যেতে পারে। ব্যবহার চালিয়ে যাওয়ার কোনও কারণ নেই .bindএবং .onতার পরিবর্তে পছন্দ করার প্রতিটি কারণ নেই ।


5
সম্ভবত - এগুলি সরিয়ে নেওয়ার খুব কম কারণ আছে কারণ তারা কেবল একটি বিদ্যমান ফাংশনে ম্যাপ করে। অন্যদিকে, একটি প্রধান সংস্করণ নম্বর দ্বারা আপগ্রেড করার অর্থ আপনি এপিআইতে কেবল কিছু করতে পারেন, যেহেতু পিছনে সামঞ্জস্যতা প্রয়োজনীয়তার সাথে সেই সময়ে গ্যারান্টিযুক্ত নয়। শুধু Sayin'.
ব্লেজমোনজার

6
এসেইলিজা এই ফাংশনগুলিতে সমস্ত নির্দিষ্ট সংখ্যক অ্যাসিনক্রোনাস অনুরোধগুলির সাথে ডিল করার জন্য দরকারী শর্টকাট সরবরাহ করে। .bindএবং .onপ্রতিনিধিবিহীন ইভেন্টগুলির জন্য অভিন্ন; .bindকোনও ধরণের শর্টকাট সরবরাহ করে $.getJSONনা
জ্যাকউন্ডার্স

7
@jbabey, টেকনিক্যালি সত্য যখন তারা অগত্যা কোনও ফাংশন সরাই না, তারা এখনও বিনয়ী তাদের এবং আপনি তাদের ব্যবহার না করতে উপদেশ। ভবিষ্যতে তারা সর্বদা তাদের সম্পূর্ণরূপে অপসারণ করার সিদ্ধান্ত নিতে পারে (সংস্করণ 2.x হিসাবে তারা কীভাবে কিছু IE সমর্থন সরিয়ে ফেলেছিল)। অবহেলিত ফাংশন ব্যবহার করা উচিত নয়।
হান্না

8
"jQuery.fn.bind.toString ()" আউটপুট "ফাংশন (ক, খ, গ) {ফিরতি this.on (ক, নাল, B, C)}" মুদ্রণ
Jowen

5
বাঁধা এবং আনবাইন্ড jQuery 3 হিসাবে অবচয় করা হয়
জো মবেল

58

এই স্নিপেটগুলি সমস্ত একই জিনিস সম্পাদন করে:

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 এ ইভেন্ট হ্যান্ডলিংকে মানক করার চেষ্টা (আপনার আর লাইভ, বাইন্ড বা প্রতিনিধিদের মধ্যে সিদ্ধান্ত নিতে হবে না)।


1
আমি মনে করি আপনি বোঝাতে চেয়েছেন $('selector').live('click', function () { ... });আপনি ফল প্রায় প্রায় একইরকম দেখতে পাবেন।
andlrc

11

সরাসরি পদ্ধতি এবং .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অ-প্রতিনিধি ইভেন্টগুলি করতে পারে না এবং এমন ইভেন্টগুলি রয়েছে যেগুলির সরাসরি পদ্ধতি নেই, সুতরাং এর মতো বিরল ক্ষেত্রে এটি ব্যবহার করা যেতে পারে তবে কেবল আপনি প্রতিনিধি এবং অ-প্রতিনিধি ইভেন্টগুলির মধ্যে একটি পরিষ্কার বিচ্ছিন্ন করতে চান।


8
JQuery 3.0 হিসাবে, .delegate () অবচয় করা হয়েছে।
অস্পষ্ট

8

যদি আপনি উত্স কোডটি সন্ধান করেন তবে আপনি দেখতে $.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


6

JQuery ডকুমেন্টেশন থেকে:

JQuery 1.7 হিসাবে, .on () পদ্ধতিটি কোনও নথিতে ইভেন্ট হ্যান্ডলার সংযুক্ত করার জন্য পছন্দসই পদ্ধতি। পূর্ববর্তী সংস্করণগুলির জন্য .bind () পদ্ধতিটি কোনও ইভেন্ট হ্যান্ডলার সরাসরি উপাদানগুলিতে সংযুক্ত করার জন্য ব্যবহৃত হয়। হ্যান্ডলারগুলি বর্তমানে নির্বাচিত উপাদানগুলির সাথে জিকুয়েরি অবজেক্টে সংযুক্ত রয়েছে, সুতরাং .bind () এ কল করার সময় সেই উপাদানগুলি অবশ্যই উপস্থিত থাকবে। আরও নমনীয় ইভেন্ট বাইন্ডিংয়ের জন্য .on () বা .delegate () এ ইভেন্ট প্রতিনিধি দলের আলোচনা দেখুন।

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


1
মনে রাখবেন, ডকুমেন্টেশনের পরামর্শটি একই দলের পক্ষ থেকে যা আপনাকে বাঁধাই, ক্লিক, লাইভ, প্রতিনিধি ... এবং ফলস্বরূপ সমস্ত বিভ্রান্তি এনেছে। এই ইস্যুতে একাধিক সাইটগুলি পড়ার পরে, আমার অভিমত হল যে সর্বোত্তম এবং সর্বাধিক নির্ভুল সাইটগুলি হ'ল "চিনি-আবরণ" হিসাবে 'অন' বর্ণনা করে, চিনি বাগগুলি আকর্ষণ করে এবং প্রতিনিধিরা যাওয়ার উপায়।
ডেভওয়ালি

4

Jquery 3.0.০ এবং তারপরের উপরে .বাইন্ডটি অবচিত করা হয়েছে এবং তারা পরিবর্তে .on ব্যবহার পছন্দ করে prefer @ ব্লাজমোনজার উত্তর হিসাবে আগেই জানিয়েছিল যে এটি মুছে ফেলা হতে পারে এবং এটি নিশ্চিত হয়ে যায় যে এটি সরানো হবে। পুরানো সংস্করণগুলির জন্য। বাইন্ডও অভ্যন্তরীণভাবে .on কল করবে এবং তাদের মধ্যে কোনও পার্থক্য নেই। আরও বিস্তারিত জানার জন্য দয়া করে এপিআইও দেখুন।

.bind () এর জন্য jQuery এপিআই ডকুমেন্টেশন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.