jQuery: plus d'un gestionnaire pour le même événement

Question

jQuery question

Qu'advient-il si je lier deux gestionnaires d'événements pour un même événement et même élément:

Par exemple:

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

Plus tard, les victoires ou les deux gestionnaires d'être exécuté?

Answer 1

Les deux gestionnaires d'exécuter, le jQuery modèle d'événement permet à plusieurs gestionnaires sur un seul élément, donc un plus tard gestionnaire de ne pas remplacer un ancien gestionnaire.

Les gestionnaires d'exécuter dans l'ordre dans lequel ils ont été tenus.

Answer 2

Supposons que vous ayez deux gestionnaires, f et g, et veulent s'assurer qu'ils sont exécutés dans un connue et fixe l'ordre, alors il suffit d'encapsuler:

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

De cette façon, il est (du point de vue de jQuery) seulement un gestionnaire, qui appelle f et g dans l'ordre spécifié.

Answer 3

jQuery .bind() se déclenche dans l'ordre qu'il a été lié:

Lorsqu'un événement arrive un élément, tous les gestionnaires d'lié à cet événement type de l'élément sont licenciés. Si il y a plusieurs gestionnaires enregistré, il sera toujours exécuté dans l'ordre dans lequel ils ont été lié. Une fois tous les gestionnaires ont exécuté, l'événement se poursuit le long de la normal la propagation de l'évènement chemin.

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

Parce que jQuery d'autres fonctions (ex. .click()) sont des raccourcis pour .bind('click', handler), je suppose qu'ils sont également déclenchés dans l'ordre où ils sont liés.

Answer 4

Vous devriez être en mesure d'utiliser le chaînage d'exécuter les événements dans l'ordre, par exemple:

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

Je suppose que le code ci-dessous est de faire de même

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

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

TFM dit aussi:

Lorsqu'un événement arrive un élément, tous les gestionnaires d'lié à cet événement type de l'élément sont licenciés. Si il y a plusieurs gestionnaires enregistré, il sera toujours exécuté dans l'ordre dans lequel ils ont été lié. Une fois tous les gestionnaires ont exécuté, l'événement se poursuit le long de la normal la propagation de l'évènement chemin.

Answer 5

De le faire fonctionner avec succès en utilisant les 2 méthodes: Stephan202 de l'encapsulation et de plusieurs écouteurs d'événement. J'ai 3 onglets de recherche, nous allons définir leur texte de saisie de l'id dans un Tableau:

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

Lorsque le contenu de searchtab1 changements, je veux mettre à jour searchtab2 et searchtab3. Il l'a fait de cette façon pour l'encapsulation:

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

Plusieurs écouteurs d'événement:

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

J'aime bien les deux méthodes, mais le programmeur a choisi d'encapsulation, cependant, de nombreux écouteurs d'événement travaillé également. Nous avons utilisé google Chrome pour tester.