jQuery: mais de um manipulador para o mesmo evento

O que acontece se eu vincular dois manipuladores de eventos ao mesmo evento para o mesmo elemento?

Por exemplo:

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

O último manipulador "vence" ou os dois manipuladores serão executados?

Ambos os manipuladores serão executados; o modelo de evento jQuery permite vários manipuladores em um elemento; portanto, um manipulador posterior não substitui um manipulador mais antigo.

Os manipuladores serão executados na ordem em que foram vinculados .

Suponha que você tenha dois manipuladores, f e g , e quer se certificar de que eles são executados em uma ordem conhecida e fixa, em seguida, basta encapsular-los:

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

Dessa maneira, existe (da perspectiva do jQuery) apenas um manipulador, que chama f e g na ordem especificada.

.bind () do jQuery é acionado na ordem em que foi vinculado :

Quando um evento atinge um elemento, todos os manipuladores vinculados a esse tipo de evento para o elemento são acionados. Se houver vários manipuladores registrados, eles sempre serão executados na ordem em que foram vinculados. Após a execução de todos os manipuladores, o evento continua no caminho normal de propagação do evento.

Fonte: http://api.jquery.com/bind/

Como as outras funções do jQuery (por exemplo .click()) são atalhos para .bind('click', handler), eu acho que elas também são acionadas na ordem em que estão vinculadas.

Você deve poder usar encadeamento para executar os eventos em sequência, por exemplo:

$('#target')
  .bind('click',function(event) {
    alert('Hello!');
  })
  .bind('click',function(event) {
    alert('Hello again!');
  })
  .bind('click',function(event) {
    alert('Hello yet again!');
  });

Eu acho que o código abaixo está fazendo o mesmo

$('#target')
      .click(function(event) {
        alert('Hello!');
      })
      .click(function(event) {
        alert('Hello again!');
      })
      .click(function(event) {
        alert('Hello yet again!');
      });

Fonte: http://www.peachpit.com/articles/article.aspx?p=1371947&seqNum=3

O TFM também diz:

Quando um evento atinge um elemento, todos os manipuladores vinculados a esse tipo de evento para o elemento são acionados. Se houver vários manipuladores registrados, eles sempre serão executados na ordem em que foram vinculados. Após a execução de todos os manipuladores, o evento continua no caminho normal de propagação do evento.

Ambos os manipuladores são chamados.

Você pode estar pensando em associação de eventos em linha (por exemplo,"onclick=..." ), onde uma grande desvantagem é que apenas um manipulador pode ser definido para um evento.

O jQuery está em conformidade com o modelo de registro de eventos do DOM Nível 2 :

O DOM Event Model permite o registro de vários ouvintes de eventos em um único EventTarget. Para conseguir isso, os ouvintes de eventos não são mais armazenados como valores de atributo

Fez funcionar com sucesso usando os 2 métodos: encapsulamento do Stephan202 e ouvintes de vários eventos. Eu tenho 3 guias de pesquisa, vamos definir os IDs de entrada de texto em uma matriz:

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

Quando o conteúdo do searchtab1 for alterado, desejo atualizar o searchtab2 e o searchtab3. Isso foi feito para o encapsulamento:

for (var i in ids) {
    $("#" + ids[i]).change(function() {
        for (var j in ids) {
            if (this != ids[j]) {
                $("#" + ids[j]).val($(this).val());
            }
        }
    });
}

Vários ouvintes de eventos:

for (var i in ids) {
    for (var j in ids) {
        if (ids[i] != ids[j]) {
            $("#" + ids[i]).change(function() {
                $("#" + ids[j]).val($(this).val());
            });
        }
    }
}

Eu gosto dos dois métodos, mas o programador escolheu o encapsulamento, no entanto, vários ouvintes de eventos também funcionaram. Usamos o Chrome para testá-lo.

Existe uma solução alternativa para garantir que um manipulador ocorra após outro: conecte o segundo manipulador a um elemento que contém e deixe o evento borbulhar. No manipulador anexado ao contêiner, você pode olhar para event.target e fazer algo, se for esse o seu interesse.

Rude, talvez, mas definitivamente deve funcionar.

O jquery executará os dois manipuladores, pois permite vários manipuladores de eventos. Eu criei um código de exemplo. Você pode experimentá-lo

demonstração