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

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Источник: http://api.jquery.com/bind/

Поскольку jQuery другие функции (например, .click()) являются ярлыками для .bind('click', handler), я бы предположил, что они также запускаются в том порядке, в котором они связаны.

Ответ 4

Вы можете использовать цепочку для последовательного выполнения событий, например:

$('#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 также говорит:

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

Ответ 5

Оба обработчика вызываются.

Возможно, вы думаете о привязке привязки inline (например, "onclick=..."), где большой недостаток - это только один обработчик, который может быть установлен для событие.

jQuery соответствует модель регистрации событий DOM уровня 2:

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

Ответ 6

Он успешно работал с использованием двух методов: инкапсуляции 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 для его проверки.

Ответ 7

Существует обходное решение, гарантирующее, что один обработчик происходит за другим: присоедините второй обработчик к содержащему элементу и дайте событию пузырь. В обработчике, прикрепленном к контейнеру, вы можете посмотреть event.target и сделать что-то, если оно вас интересует.

Грубый, может быть, но он определенно должен работать.