JQuery: более одного обработчика для одного и того же события

Что произойдет, если я назначу два обработчика событий одному и тому же событию для одного и того же элемента?

Например:

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

Последний обработчик "побеждает" или оба обработчика будут запущены?

Оба обработчика будут работать, модель событий jQuery допускает несколько обработчиков для одного элемента, поэтому более поздний обработчик не переопределяет более старый обработчик.

Обработчики будут выполняться в том порядке, в котором они были связаны .

Предположим, что у вас есть два обработчика, f и g , и вы хотите убедиться, что они выполняются в известном и фиксированном порядке, а затем просто инкапсулировать их:

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

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

.bind () запускается в том порядке, в котором он был связан :

Когда событие достигает элемента, запускаются все обработчики, связанные с этим типом события для элемента. Если зарегистрировано несколько обработчиков, они всегда будут выполняться в том порядке, в котором они были связаны. После выполнения всех обработчиков событие продолжается по обычному пути распространения события.

Источник: 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. Для этого прослушиватели событий больше не сохраняются как значения атрибутов.

Сделал это успешно, используя 2 метода: инкапсуляцию 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 выполнит оба обработчика, так как он позволяет использовать несколько обработчиков событий. Я создал образец кода. Можешь попробовать

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