jQuery: più di un gestore per lo stesso evento

Cosa succede se associo due gestori di eventi allo stesso evento per lo stesso elemento?

Per esempio:

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

L'ultimo gestore "vince" o verranno eseguiti entrambi i gestori?

Verranno eseguiti entrambi i gestori, il modello di eventi jQuery consente più gestori su un elemento, quindi un gestore successivo non sostituisce un gestore precedente.

I gestori eseguiranno nell'ordine in cui erano vincolati .

Si supponga di avere due gestori, f e g , e vuole fare in modo che essi vengono eseguiti in un ordine noto e fisso, poi basta incapsulare:

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

In questo modo si ha (dal punto di vista jQuery) soltanto un conduttore, che chiama f e g nell'ordine specificato.

.bind () di jQuery si attiva nell'ordine in cui è stato associato :

Quando un evento raggiunge un elemento, vengono generati tutti i gestori associati a quel tipo di evento per l'elemento. Se sono presenti più gestori registrati, verranno sempre eseguiti nell'ordine in cui erano associati. Dopo l'esecuzione di tutti i gestori, l'evento continua lungo il normale percorso di propagazione dell'evento.

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

Poiché le altre funzioni di jQuery (ad es. .click()) Sono scorciatoie .bind('click', handler), immagino che siano anche attivate nell'ordine in cui sono associate.

Dovresti essere in grado di utilizzare il concatenamento per eseguire gli eventi in sequenza, ad esempio:

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

Immagino che il codice seguente stia facendo lo stesso

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

TFM dice anche:

Quando un evento raggiunge un elemento, vengono generati tutti i gestori associati a quel tipo di evento per l'elemento. Se sono presenti più gestori registrati, verranno sempre eseguiti nell'ordine in cui erano associati. Dopo l'esecuzione di tutti i gestori, l'evento continua lungo il normale percorso di propagazione dell'evento.

Entrambi i gestori vengono chiamati.

Potresti pensare al binding di eventi inline (ad esempio "onclick=..."), dove un grande svantaggio è che solo un gestore può essere impostato per un evento.

jQuery è conforme al modello di registrazione eventi DOM livello 2 :

Il modello di eventi DOM consente la registrazione di più listener di eventi su un singolo EventTarget. A tale scopo, i listener di eventi non vengono più archiviati come valori di attributo

Ha funzionato con successo utilizzando i 2 metodi: l'incapsulamento di Stephan202 e i listener di eventi multipli. Ho 3 schede di ricerca, definiamo i loro ID di testo di input in un array:

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

Quando il contenuto di searchtab1 cambia, voglio aggiornare searchtab2 e searchtab3. Ha fatto così per l'incapsulamento:

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

Listener di eventi multipli:

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

Mi piacciono entrambi i metodi, ma il programmatore ha scelto l'incapsulamento, tuttavia anche i listener di eventi multipli hanno funzionato. Abbiamo usato Chrome per testarlo.

Esiste una soluzione alternativa per garantire che un gestore si verifichi dopo l'altro: collegare il secondo gestore a un elemento contenente e lasciare che l'evento si riempia di bolle. Nel gestore collegato al contenitore, puoi guardare event.target e fare qualcosa se è quello a cui sei interessato.

Greggio, forse, ma sicuramente dovrebbe funzionare.

jquery eseguirà entrambi i gestori poiché consente più gestori di eventi. Ho creato un codice di esempio. Puoi provarlo

dimostrazione