jQuery: একই ইভেন্টের জন্য একাধিক হ্যান্ডলার

137

যদি আমি একই ইভেন্টের জন্য দুটি ইভেন্ট হ্যান্ডলারকে একই ইভেন্টে আবদ্ধ করি তবে কী হবে?

উদাহরণ স্বরূপ:

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

শেষ হ্যান্ডলারটি কি "জিতেছে", বা উভয় হ্যান্ডলার চালিত হবে?

javascript jquery event-handling

— flybywire
সূত্র

168

উভয় হ্যান্ডলারই চলবে, jQuery ইভেন্টের মডেল এক উপাদানটিতে একাধিক হ্যান্ডলারকে মঞ্জুরি দেয়, সুতরাং পরবর্তী হ্যান্ডলার কোনও পুরানো হ্যান্ডলারকে ওভাররাইড করে না।

হ্যান্ডলাররা যেভাবে তাদের আবদ্ধ ছিল সেটিকে সম্পাদন করবে ।

— রাশ ক্যাম
সূত্র

1

দেশি পথে কী হয়? এবং স্থানীয়রা কীভাবে কোনও নির্দিষ্টটিকে অপসারণ করতে জানে?

— সুপারউবারডুপার

1

ডিওএম লেভেল 3 (HTML 5 স্পেসের রেফারেন্স) অনুসারে ইভেন্ট হ্যান্ডলারগুলি যেভাবে তারা নিবন্ধিত রয়েছে সেভাবে কার্যকর করা হয় - w3.org/TR/DOM-Level-3-Events/#event-phase এবং w3.org/TR/ 2014 / আরইসি-এইচটিএমএল 5-20141028 /… । ইভেন্ট হ্যান্ডলারগুলি নিবন্ধিত হ্যান্ডলারটির একটি রেফারেন্স পাস করার মাধ্যমে সরানো যেতে পারে

— রাশ ক্যাম

@ রুসক্যাম যদি হ্যান্ডলারটি আরও বেঁধে থাকে তবে কি হয় একবার বলুন jQuery('.btn').on('click',handlerClick);আসলে কোনও জায়গায় না বলে বিভিন্ন জায়গায় ডাকা হয় .off?

— techie_28

নোট করুন যে jQueryUI উইজেটফ্যাক্টরি উইজেটগুলির জন্য, আপনি যদি হ্যান্ডলারটিকে কোনও বিকল্প হিসাবে সেট করেন তবে এটি সত্য নয়। পুরানো এবং নতুন হ্যান্ডলার উভয়কেই কল করার জন্য, আপনাকে এই bindপদ্ধতিটি ব্যবহার করতে হবে । বিস্তারিত জানার জন্য এটি দেখুন: learn.jquery.com/jquery-ui/widget-factory/…

— মাইকেল

@ মিশেল শ্যাপার উত্তরটি সম্পাদনা করতে এবং অতিরিক্ত তথ্যের সাথে আপডেট করতে দ্বিধা বোধ করবেন

— রাশ ক্যাম

36

মনে করুন যে আপনার দুটি এফ এবং জি রয়েছে এবং তারা নিশ্চিত এবং স্থির ক্রমে মৃত্যুদন্ড কার্যকর করা হয়েছে তা নিশ্চিত করতে চান, তবে কেবল তাদের আবদ্ধ করুন:

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

এইভাবে (jQuery এর দৃষ্টিকোণ থেকে) কেবলমাত্র একটি হ্যান্ডলার রয়েছে, যা নির্দিষ্ট ক্রমে f এবং g কল করে।

— Stephan202
সূত্র

3

+1, কোনও ফাংশনের অভ্যন্তরে এনক্যাপসুলেশন হ'ল উপায়। এবং আরও উত্তম শর্তযুক্ত যুক্তি হ্যান্ডলার ফাংশনের অভ্যন্তরে ঘটতে পারে এমন ইভেন্টগুলি গুলি নিয়ন্ত্রণ করতে পারে s

— গর্ডন পটার

হ্যান্ডলারের একটি সংগ্রহ যার ক্রম প্রোগ্রামিক্যালি নির্ধারিত।

— অ্যারন ব্লেনকুশ

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

টিএফএম আরও বলে:

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

— anddoutoi
সূত্র

1

যে কোড বা এই নিবন্ধটি হ্যান্ডলার মৃত্যুদন্ড কার্যকর করার আদেশকে সংজ্ঞায়িত করে না। হ্যাঁ, ইভেন্টের বাইন্ডিংটি ঘটবে সেই আদেশ, তবে ইভেন্ট হ্যান্ডলাররা যে আদেশ পেয়েছে তা এখনও আনুষ্ঠানিকভাবে সংজ্ঞায়িত।

— ক্রিসেন্ট ফ্রেশ

ehh? কী সম্পর্কে "এখন ক্লিক ইভেন্টটি যখন ঘটে তখন প্রথম ইভেন্টের হ্যান্ডলারটি কল করা হবে, তারপরে দ্বিতীয়টি এবং তৃতীয়টি অনুসরণ করবে।" অস্পষ্ট?

— anddoutoi

এবং হ্যাঁ, আমি জানি যে সরকারী recs এটি সংজ্ঞায়িত করে না এবং পিপিেকে ইতিমধ্যে প্রমাণ করেছে যে ইভেন্টের মৃত্যুদণ্ড এলোমেলো তবে সম্ভবত jQuery এটি স্থির করেছে

— and

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

— ক্রিসেন্ট ফ্রেশ

5

@ ক্রিসেন্টফ্রেশ: এইরকম দেরী জবাবের জন্য দুঃখিত, আমি কেবল প্রশ্নটি দেখেছি, তবে আমি চাই আপনি লিঙ্কটি যুক্ত করুন এটি 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.

— রেজার্ট

2

উভয় হ্যান্ডলারের কল করা হয়।

আপনি ইনলাইন ইভেন্ট বাঁধাইয়ের কথা ভাবতে পারেন (উদাঃ "onclick=..."), যেখানে কোনও বড় ব্যর্থতা কেবলমাত্র একটি হ্যান্ডলার একটি ইভেন্টের জন্য সেট করা যেতে পারে।

jQuery ডিওএম স্তর 2 ইভেন্ট নিবন্ধকরণ মডেল অনুসারে :

ডিওএম ইভেন্ট মডেল একক ইভেন্ট ইভেন্টে একাধিক ইভেন্ট শ্রোতাদের নিবন্ধকরণের অনুমতি দেয়। এটি অর্জন করতে, ইভেন্ট শ্রোতাদের আর অ্যাট্রিবিউট মান হিসাবে সংরক্ষণ করা হয় না

— ক্রিসেন্ট ফ্রেশ
সূত্র

@ রিচ: অর্ডারটি আনুষ্ঠানিকভাবে অপরিশোধিত।

— ক্রিসেন্ট ফ্রেশ

2

এটি 2 টি পদ্ধতি ব্যবহার করে সফলভাবে কাজ করেছে: স্টেফান 202 এর এনক্যাপসুলেশন এবং একাধিক ইভেন্ট শ্রোতা। আমার কাছে 3 টি অনুসন্ধান ট্যাব রয়েছে, আসুন তাদের অ্যারে ইনপুট পাঠ্য আইডি এর সংজ্ঞা দিন:

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

সার্চট্যাব 1-এর সামগ্রী পরিবর্তিত হলে আমি সন্ধান ট্যাব 2 এবং সন্ধান ট্যাব 3 আপডেট করতে চাই। এটি কীভাবে এনক্যাপসুলেশনের জন্য হয়েছিল:

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

একের পর এক হ্যান্ডলার ঘটবে তার গ্যারান্টি দেওয়ার জন্য একটি কৌশল রয়েছে: দ্বিতীয় হ্যান্ডলারটি একটি উপাদানযুক্ত উপাদানটির সাথে সংযুক্ত করুন এবং ইভেন্টটি বুদবুদ হতে দিন। ধারকটির সাথে সংযুক্ত হ্যান্ডলারে, আপনি ইভেন্ট.আরটিজেট দেখতে পারেন এবং এটিতে আগ্রহী এমন কিছু হলে আপনি কিছু করতে পারেন।

অশোধিত, সম্ভবত, তবে এটি অবশ্যই কাজ করা উচিত।

— ডেভিড
সূত্র

0

jquery উভয় হ্যান্ডলারকে কার্যকর করবে কারণ এটি একাধিক ইভেন্ট হ্যান্ডলারকে অনুমতি দেয়। আমি নমুনা কোড তৈরি করেছি। আপনি চেষ্টা করতে পারেন

ডেমো

— বিক্রম রাজপুত
সূত্র