jQuery: más de un controlador para el mismo evento

¿Qué sucede si enlazo dos controladores de eventos al mismo evento para el mismo elemento?

Por ejemplo:

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

¿El último controlador "gana" o se ejecutarán ambos controladores?

Ambos manejadores se ejecutarán, el modelo de evento jQuery permite múltiples manejadores en un elemento, por lo tanto, un manejador posterior no anula a un manejador más antiguo.

Los manejadores se ejecutarán en el orden en que se vincularon .

Suponga que tiene dos manejadores, f y g , y desea asegurarse de que se ejecutan en un orden conocido y fijo, luego simplemente encapsúlelos:

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

De esta manera hay (desde la perspectiva de jQuery) solo un controlador, que llama a f y g en el orden especificado.

El .bind () de jQuery se dispara en el orden en que se enlazó :

Cuando un evento llega a un elemento, se activan todos los controladores vinculados a ese tipo de evento para el elemento. Si hay varios controladores registrados, siempre se ejecutarán en el orden en que se vincularon. Después de que todos los controladores se hayan ejecutado, el evento continúa a lo largo de la ruta normal de propagación de eventos.

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

Debido a que las otras funciones de jQuery (ej. .click()) Son atajos para .bind('click', handler), supongo que también se activan en el orden en que están vinculados.

Debería poder usar el encadenamiento para ejecutar los eventos en secuencia, por ejemplo:

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

Supongo que el siguiente código está haciendo lo mismo

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

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

TFM también dice:

Cuando un evento llega a un elemento, se activan todos los controladores vinculados a ese tipo de evento para el elemento. Si hay varios controladores registrados, siempre se ejecutarán en el orden en que se vincularon. Después de que todos los controladores se hayan ejecutado, el evento continúa a lo largo de la ruta normal de propagación de eventos.

Se llama a ambos manejadores.

Puede estar pensando en el enlace de eventos en línea (p "onclick=...". Ej. ), Donde un gran inconveniente es que solo se puede configurar un controlador para un evento.

jQuery se ajusta al modelo de registro de eventos DOM Nivel 2 :

El modelo de eventos DOM permite el registro de múltiples oyentes de eventos en un único EventTarget. Para lograr esto, los oyentes de eventos ya no se almacenan como valores de atributo

Lo hizo funcionar con éxito utilizando los 2 métodos: encapsulación de Stephan202 y oyentes de eventos múltiples. Tengo 3 pestañas de búsqueda, definamos sus ID de texto de entrada en una matriz:

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

Cuando el contenido de searchtab1 cambia, quiero actualizar searchtab2 y searchtab3. Lo hizo de esta manera para la encapsulación:

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

Oyentes de múltiples 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());
            });
        }
    }
}

Me gustan ambos métodos, pero el programador eligió la encapsulación, sin embargo, varios oyentes de eventos también funcionaron. Usamos Chrome para probarlo.

Hay una solución alternativa para garantizar que un controlador suceda después de otro: adjunte el segundo controlador a un elemento contenedor y deje que el evento brote. En el controlador adjunto al contenedor, puede mirar event.target y hacer algo si es lo que le interesa.

Crudo, tal vez, pero definitivamente debería funcionar.

jquery ejecutará ambos manejadores ya que permite múltiples manejadores de eventos. He creado un código de muestra. Puedes probarlo

manifestación