jQuery: більше одного обробника для однієї події

Що станеться, якщо я прив’язую два обробники подій до однієї події для одного і того ж елемента?

Наприклад:

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

"Перемагає" останній обробник, чи будуть запущені обидва обробники?

Обидва обробники працюватимуть, модель подій jQuery дозволяє декілька обробників на одному елементі, тому пізніший обробник не замінює старший обробник.

Обробники виконують у тому порядку, в якому вони були пов'язані .

Припустимо, у вас є два обробники, f і g , і ви хочете переконатися, що вони виконуються у відомому та фіксованому порядку, тоді просто інкапсулюйте їх:

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

Таким чином існує (з точки зору jQuery) лише один обробник, який викликає f і g у визначеному порядку.

.bind () запускає jQuery у порядку, за яким він був пов'язаний :

Коли подія досягає елемента, всі обробники, пов'язані з типом події для елемента, будуть звільнені. Якщо зареєстровано кілька обробників, вони завжди виконуватимуться в тому порядку, в якому вони були пов'язані. Після того, як всі обробники виконані, подія продовжується по звичайному шляху поширення події.

Джерело: http://api.jquery.com/bind/

Оскільки інші функції jQuery (наприклад .click()) - це ярлики .bind('click', handler), я б здогадався, що вони також спрацьовують у тому порядку, до якого вони пов'язані.

Ви повинні мати можливість використовувати ланцюжок для виконання подій послідовно, наприклад:

$('#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

TFM також говорить:

Коли подія досягає елемента, всі обробники, пов'язані з типом події для елемента, будуть звільнені. Якщо зареєстровано кілька обробників, вони завжди виконуватимуться в тому порядку, в якому вони були пов'язані. Після того, як всі обробники виконані, подія продовжується по звичайному шляху поширення події.

Обидва обробники телефонують.

Ви можете думати про вбудовану прив'язку подій (наприклад "onclick=..."), коли великим недоліком для події може бути встановлений лише один обробник.

jQuery відповідає моделі реєстрації подій DOM рівня 2 :

Модель подій DOM дозволяє реєструвати декілька слухачів подій на одному EventTarget. Щоб досягти цього, слухачі подій більше не зберігаються як значення атрибутів

Це дозволило успішно працювати за допомогою двох методів: інкапсуляції Stephan202 та кількох слухачів подій. У мене є 3 вкладки пошуку, давайте визначимо їх вхідний текст ідентифікатора в масиві:

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

Коли зміст searchtab1 змінюється, я хочу оновити searchtab2 та searchtab3. Зробив це так для капсулювання:

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());
            });
        }
    }
}

Мені подобаються обидва методи, але програміст обрав інкапсуляцію, однак також працювали багато слухачів подій. Для тестування ми використовували Chrome.

Існує рішення, яке гарантує, що один обробник трапиться за іншим: приєднайте другий обробник до елемента, що містить, і подія пузириться. У обробнику, приєднаному до контейнера, ви можете подивитися на event.target і зробити щось, якщо це той, хто вас цікавить.

Сире, можливо, але це, безумовно, має спрацювати.

jquery буде виконувати обидва обробники, оскільки дозволяє декілька обробників подій. Я створив зразок коду. Можна спробувати

демонстрація