ডাইরেক্ট বনাম প্রেরিত - jQuery .on ()

Question

আমি jQuery .on () পদ্ধতিটি ব্যবহার করে প্রত্যক্ষ এবং প্রতিনিধি ইভেন্ট হ্যান্ডলারগুলির মধ্যে এই বিশেষ পার্থক্যটি বোঝার চেষ্টা করছি । বিশেষত, এই অনুচ্ছেদে শেষ বাক্য:

যখন selectorসরবরাহ করা হয়, ইভেন্ট হ্যান্ডলারটিকে ডেলিগেট হিসাবে উল্লেখ করা হয় । ইভেন্টটি সরাসরি বাউন্ড এলিমেন্টে ঘটলে হ্যান্ডলারকে ডাকা হয় না, তবে কেবল নির্বাচকের সাথে মেলে এমন বংশধর (অভ্যন্তরীণ উপাদান) for jQuery ইভেন্টের লক্ষ্য থেকে উপাদানটিকে হ্যান্ডলার সংযুক্ত (যেমন, অভ্যন্তরীণতম থেকে বাইরেরতম উপাদান) পর্যন্ত ইভেন্টের বুদ্বুদ্বিত করে এবং নির্বাচকের সাথে মিলে যাওয়ার পথে যে কোনও উপাদানগুলির জন্য হ্যান্ডলারটি চালায়।

"কোনও উপাদানগুলির জন্য হ্যান্ডলার চালায়" এর অর্থ কী? ধারণাটি পরীক্ষা করার জন্য আমি একটি পরীক্ষা পৃষ্ঠা তৈরি করেছি । তবে নিম্নলিখিত দুটি নির্মাণ একই আচরণের দিকে পরিচালিত করে:

$("div#target span.green").on("click", function() {
   alert($(this).attr("class") + " is clicked");
});

বা,

$("div#target").on("click", "span.green", function() {
   alert($(this).attr("class") + " is clicked");
});

এই পয়েন্টটি স্পষ্ট করার জন্য হয়ত কেউ আলাদা উদাহরণের কথা বলতে পারে? ধন্যবাদ।

Comments

সমস্ত আগ্রহী: jsperf.com/jquery-fn-on-delegate-vs-direct

— ডিজিও

@ কেভিনহিলার আমি নীচে আপনার ফিডল সম্পর্কে মন্তব্য করেছি তবে এখানে মূলত এটি সঠিকভাবে সেট আপ করা হয়নি (আপনি পিতামাতার সাথে আবদ্ধ হন, এবং শিশুদের জন্য প্রতিনিধি দল তৈরি করা হয়)। আপনার প্রশ্নের উত্তর দেওয়ার জন্য এর অর্থ হ'ল প্রতিনিধি হ্যান্ডলারটি নতুন যুক্ত হওয়া উপাদানগুলির সাথে মেলে, যেখানে প্রতিনিধি দল ছাড়া সে তা করবে না। ব্রাউজারটিতে অ্যাপ্লিকেশনটির জন্য কম মেমরির খরচ কমে এমন ঘটনা কম হওয়ার কারণে ডেলিগেশনের সুবিধা রয়েছে, তবে ট্রেডফফটি হ'ল এটি ক্লিকের প্রক্রিয়া করার সময়কে বাড়িয়ে তোলে (ন্যূনতম)। আপনি যদি কোনও গেম তৈরি করেন তবে প্রতিনিধি করবেন না।

— vipero07

আপনার উল্লেখ করা "পরীক্ষামূলক পৃষ্ঠা" কাজ করছে না।

— জায়েম মনটোয়া

Answer 1

কেস 1 (সরাসরি):

$("div#target span.green").on("click", function() {...});

== আরে! আমি দ্বি # টার্গেটের ভিতরে প্রতিটি স্প্যান.আরগ্রিন শুনতে চাই: আপনি যখন ক্লিক করেন, এক্স করুন do

কেস ২ (প্রতিনিধি):

$("div#target").on("click", "span.green", function() {...});

== আরে, ডিভ # টার্গেট! আপনার "স্প্যান.green" বাচ্চার উপাদানগুলির মধ্যে যখন কেউ ক্লিক করেন, তখন তাদের সাথে এক্স করুন।

অন্য কথায় ...

ক্ষেত্রে 1, এই স্প্যানগুলির প্রত্যেককে স্বতন্ত্রভাবে নির্দেশনা দেওয়া হয়েছে। যদি নতুন স্প্যানগুলি তৈরি হয়, তারা নির্দেশনা শুনেনি এবং ক্লিকগুলিতে সাড়া দেবে না। প্রতিটি স্প্যান তার নিজস্ব ইভেন্টের জন্য সরাসরি দায়বদ্ধ ।

ক্ষেত্রে 2, কেবল ধারককে নির্দেশ দেওয়া হয়েছে; এটি তার শিশু উপাদানগুলির পক্ষে ক্লিকগুলি লক্ষ্য করার জন্য দায়ী । ইভেন্টগুলি ধরার কাজটি অর্পণ করা হয়েছে । এর অর্থ হ'ল ভবিষ্যতে তৈরি করা শিশু উপাদানগুলির জন্য নির্দেশনাটি কার্যকর করা হবে।

Comments

এটি একটি দুর্দান্ত ব্যাখ্যা, এবং এমন একটি বিষয়ে স্পষ্টতা এনেছে যেটি আমি দীর্ঘদিন ধরে বুঝতে অস্বীকার করেছি। ধন্যবাদ!

— ডিজিও

সুতরাং কেন on()দুটি আর্গুমেন্টের অনুমতি দেয় যখন ব্যবহারের মতো প্রায় একই রকম হয় click()?

— নিপোনস

.on () হ'ল একটি সাধারণ উদ্দেশ্য এপিআই যা একাধিক বিভিন্ন ইভেন্ট সহ যে কোনও ধরণের ইভেন্ট হ্যান্ডেল করতে পারে (আপনি সেই প্রথম স্ট্রিংয়ে একাধিক ইভেন্টের নাম রাখতে পারেন।)। ক্লিক () সেই প্রথম ফর্মটির জন্য কেবল একটি শর্টহ্যান্ড।

— এন 3 ডিস্ট 4

@ নতুন, @ এন 3 ডিস্ট 4: e.targetক্লিক ইভেন্টের প্রাথমিক লক্ষ্য হবে (যদি শিশু থাকে তবে চাইল্ড নোড হতে পারে span.green)। হ্যান্ডলারের ভিতরে থেকে আপনার thisরেফারেন্সটি ব্যবহার করা উচিত । এই ঝাঁকুনি দেখুন ।

— লেজেক

প্রতিনিধিদের বিষয়টিতে যুক্ত করার জন্য আরেকটি নোট - এটি উভয়ই খুব দরকারী এবং খুব দক্ষ। আপনি প্রতি ম্যাচের উপাদানগুলিতে ইভেন্ট সংযুক্ত করার সাথে প্রতিনিধিদের সাথে কম ব্রাউজার সংস্থান ব্যবহার করবেন। ভেবেছি আমি এটি উল্লেখ করেছি, যদি প্রতিনিধিদল ব্যবহার করার জন্য লোকদের আরও কারণের প্রয়োজন হয়।

— ফটসকাত

Answer 2

প্রথম উপায়, $("div#target span.green").on()একটি ক্লিক হ্যান্ডলারের সরাসরি স্প্যান (গুলি) এর সাথে সংযুক্ত করে যে কোডটি কার্যকর করা হয় সেই মুহুর্তে নির্বাচকের সাথে মেলে। এর অর্থ যদি অন্য স্প্যানগুলি পরে যুক্ত করা হয় (বা তাদের ক্লাসটি ম্যাচে পরিবর্তিত হয়েছে) সেগুলি মিস হয়ে গেছে এবং তার একটি ক্লিক হ্যান্ডলার নেই। এর অর্থ হ'ল আপনি যদি পরে কোনও স্প্যান থেকে "সবুজ" শ্রেণিটি সরিয়ে থাকেন তবে তার ক্লিক হ্যান্ডলারটি চালিয়ে যেতে থাকবে - jQuery হ্যান্ডলারটি কীভাবে নির্ধারিত হয়েছিল সে সম্পর্কে নজর রাখে না এবং নির্বাচক এখনও মেলে কিনা তা পরীক্ষা করে দেখুন।

দ্বিতীয় উপায়ে, $("div#target").on()একটি ক্লিক হ্যান্ডলারের সাথে ডিভ (গুলি) এর সাথে ম্যাচ বেঁধে রাখে (আবার, এটি সেই মুহুর্তের সাথে মেলে এমনগুলির বিরুদ্ধে), তবে যখন কোনও ক্লিক ডিভের কোথাও ঘটে তখন হ্যান্ডলার ফাংশনটি কেবল চালানো হবে ক্লিক করলে কেবল .on()ডিভের মধ্যেই নয়, একটি শিশু উপাদানে দ্বিতীয় প্যারামিটারে "স্প্যান.g्रीन" এর সাথে নির্বাচকটির সাথে মিল রয়েছে । এইভাবে সম্পন্ন হয়ে গেলে those শিশুদের স্প্যানগুলি কখন তৈরি হয়েছিল তা বিবেচ্য নয়, তাদের ক্লিক করে এখনও হ্যান্ডলারটি চালানো হবে।

সুতরাং এমন একটি পৃষ্ঠার জন্য যা গতিশীলভাবে এর সামগ্রীগুলি যুক্ত বা পরিবর্তন করছে না আপনি দুটি পদ্ধতির মধ্যে কোনও পার্থক্য লক্ষ্য করবেন না। আপনি যদি গতিশীলভাবে অতিরিক্ত শিশু উপাদান যুক্ত করে থাকেন তবে দ্বিতীয় সিনট্যাক্সের অর্থ তাদের ক্লিক হ্যান্ডলারগুলি দেওয়ার বিষয়ে আপনাকে চিন্তা করতে হবে না কারণ আপনি ইতিমধ্যে একবার পিতামাতায় এটি সম্পন্ন করেছেন।

Answer 3

এন 3 ডিস্ট 4 এর ব্যাখ্যা সঠিক। এর ভিত্তিতে, আমরা ধরে নিতে পারি যে সমস্ত শিশুর উপাদানগুলি শরীরের অভ্যন্তরে থাকে, সুতরাং আমাদের কেবল এটি ব্যবহার করতে হবে:

$('body').on('click', '.element', function(){
    alert('It works!')
});

এটি সরাসরি বা প্রতিনিধি ইভেন্টের সাথে কাজ করে।

Comments

jquery দেহ ব্যবহারের বিরুদ্ধে পরামর্শ দেয়, কারণ এটি ধীর হয়, কারণ স্ক্রিপ্টে শরীরের অভ্যন্তরের সমস্ত শিশুদের সন্ধান করতে হবে, যা বেশিরভাগ ক্ষেত্রেই অনেক কিছু হওয়া উচিত। উপাদানটির অন্তর্বতী পিতামাতার ধারকটি ব্যবহার করা ভাল (দ্রুত)।

— মাইকসফট

জকিউরি লাইভ পদ্ধতিটি সরিয়ে ফেলেছে যা আপনি দেখিয়েছিলেন তেমনই করছে। এটি কর্মক্ষমতা দুর্বল এবং ব্যবহার করা উচিত নয়।

— ম্যাকিয়েজ সিকোড়া

আধুনিক ব্রাউজারগুলিতে, $('body').on()থেকে আসা প্রতিনিধিদের কলব্যাকের সাথে নেটিভের .elementমতো ঠিক একই রকম আচরণ করা উচিত । ওভারহেডের কারণে এটি jquery এ খুব সামান্য ধীর হতে পারে তবে সে সম্পর্কে আমাকে উদ্ধৃতি দেবেন না। document.body.addEventHandler()if (Event.target.className.matches(/\belement\b/))$.proxy

— কাউয়ার্ট

Answer 4

ওপিতে স্পর্শকাতর, তবে ধারণাটি যা আমাকে এই বৈশিষ্ট্যটির সাথে বিভ্রান্তি দূর করতে সহায়তা করেছিল তা হ'ল আবদ্ধ উপাদানগুলি অবশ্যই নির্বাচিত উপাদানগুলির পিতা-মাতার হতে হবে ।

• গণ্ডিটি কিসের অবশিষ্টটি বোঝায় .on।
• নির্বাচিত এর দ্বিতীয় যুক্তিকে বোঝায় .on()।

সীমাবদ্ধ উপাদানগুলির একটি উপসেট নির্বাচন করে ডেলিগেশন .find () এর মতো কাজ করে না। নির্বাচক কেবল কঠোর শিশু উপাদানগুলিতে প্রয়োগ করে।

$("span.green").on("click", ...

থেকে খুব আলাদা

$("span").on("click", ".green", ...

বিশেষত, "ভবিষ্যতে তৈরি করা উপাদানগুলি" এর সাথে @ এন 3 ডিস্ট 4 ইঙ্গিতগুলি সুবিধাগুলি অর্জনের জন্য আবদ্ধ উপাদানটি অবশ্যই একটি স্থায়ী পিতা-মাতার হতে হবে । তারপরে নির্বাচিত বাচ্চারা আসতে এবং যেতে পারে।

সম্পাদনা

প্রতিনিধি কেন .onকাজ করে না তার চেকলিস্ট

কৌশলপূর্ণ কারণগুলি কেন $('.bound').on('event', '.selected', some_function)কাজ করতে পারে না:

1. গণ্ডি উপাদান স্থায়ী নয় । এটি কল করার পরে তৈরি করা হয়েছিল.on()
2. নির্বাচিত উপাদান বাউন্ড উপাদানগুলির উপযুক্ত শিশু নয় । এটি একই উপাদান।
3. নির্বাচিত উপাদান কল করে বাউন্ড এলিমেন্টে কোনও ইভেন্টের বুদবুদ ঠেকিয়েছিল.stopPropagation() ।

(কম জটিল কারণে যেমন একটি ভুল বানান নির্বাচককে বাদ দেওয়া)

Answer 5

আমি সরাসরি ইভেন্টগুলির তুলনা করে একটি পোস্ট wro তে নিযুক্ত করি এবং নিযুক্ত করি। আমি খাঁটি জেএস তুলনা করি তবে এটি jquery এর জন্য একই অর্থ রয়েছে যা কেবল এটি encapsulate করে।

উপসংহারটি হ'ল প্রতিনিধি ইভেন্ট হ্যান্ডলিংটি গতিশীল ডিওএম কাঠামোর জন্য যেখানে ব্যবহারকারী পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার সময় বাইন্ডেড উপাদান তৈরি করা যেতে পারে (আবার বাইন্ডিংয়ের প্রয়োজন নেই), এবং সরাসরি ইভেন্ট হ্যান্ডলিং স্ট্যাটিক ডিওএম উপাদানগুলির জন্য হয়, যখন আমরা জানি যে কাঠামোটি পরিবর্তন হবে না।

আরও তথ্য এবং সম্পূর্ণ তুলনার জন্য - http://maciejsikora.com/standard-events-vs-event-delegation/

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

Comments

যদি অনেক ইভেন্ট হ্যান্ডলার সংযুক্ত করে থাকে (উদাহরণস্বরূপ, একটি টেবিলের প্রতিটি সারি), অনেকগুলি সরাসরি হ্যান্ডলার সংযুক্ত করার পরিবর্তে ধারকটিতে একক প্রতিনিধি হ্যান্ডলারটি ব্যবহার করা প্রায়শই ভাল performance আপনি ইভেন্ট হ্যান্ডলার গণনা নিজেই একটি প্রোফাইলিং মেট্রিক এটি বুনিয়াদী সত্য থেকে দেখতে পারেন।

— কাউয়ার্ট