jQuery: plusieurs gestionnaires pour le même événement

Que se passe-t-il si je lie deux gestionnaires d'événements au même événement pour le même élément?

Par exemple:

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

Le dernier gestionnaire "gagne" ou les deux gestionnaires seront-ils exécutés?

Les deux gestionnaires s'exécuteront, le modèle d'événement jQuery autorise plusieurs gestionnaires sur un élément, par conséquent, un gestionnaire plus récent ne remplace pas un gestionnaire plus ancien.

Les gestionnaires s'exécuteront dans l'ordre dans lequel ils ont été liés .

Supposons que vous ayez deux gestionnaires, f et g , et que vous souhaitiez vous assurer qu'ils sont exécutés dans un ordre connu et fixe, puis encapsulez-les simplement:

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

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

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

Lorsqu'un événement atteint un élément, tous les gestionnaires liés à ce type d'événement pour l'élément sont déclenchés. S'il y a plusieurs gestionnaires enregistrés, ils s'exécuteront toujours dans l'ordre dans lequel ils ont été liés. Une fois tous les gestionnaires exécutés, l'événement continue le long du chemin de propagation d'événement normal.

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

Parce que les autres fonctions de jQuery (par exemple .click()) sont des raccourcis pour .bind('click', handler), je suppose qu'elles sont également déclenchées dans l'ordre dans lequel elles sont liées.

Vous devriez pouvoir utiliser le chaînage pour 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 fait la même chose

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

Lorsqu'un événement atteint un élément, tous les gestionnaires liés à ce type d'événement pour l'élément sont déclenchés. S'il y a plusieurs gestionnaires enregistrés, ils s'exécuteront toujours dans l'ordre dans lequel ils ont été liés. Une fois tous les gestionnaires exécutés, l'événement continue le long du chemin de propagation d'événement normal.

Les deux gestionnaires sont appelés.

Vous pensez peut-être à la liaison d'événement en ligne (par exemple "onclick=..."), où un gros inconvénient est qu'un seul gestionnaire peut être défini pour un événement.

jQuery est conforme au modèle d'enregistrement d'événement DOM Niveau 2 :

Le modèle d'événement DOM permet l'enregistrement de plusieurs écouteurs d'événements sur un seul EventTarget. Pour ce faire, les écouteurs d'événements ne sont plus stockés en tant que valeurs d'attribut

Cela a fonctionné avec succès en utilisant les 2 méthodes: l'encapsulation de Stephan202 et plusieurs écouteurs d'événements. J'ai 3 onglets de recherche, définissons leurs identifiants de texte d'entrée dans un tableau:

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

Lorsque le contenu de searchtab1 change, je souhaite mettre à jour searchtab2 et searchtab3. Je l'ai 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());
            }
        }
    });
}

Écouteurs d'événements multiples:

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 les deux méthodes, mais le programmeur a choisi l'encapsulation, mais plusieurs écouteurs d'événements fonctionnaient également. Nous avons utilisé Chrome pour le tester.

Il existe une solution de contournement pour garantir qu'un gestionnaire se produit après l'autre: attachez le deuxième gestionnaire à un élément conteneur et laissez l'événement remonter. Dans le gestionnaire attaché au conteneur, vous pouvez consulter event.target et faire quelque chose si c'est celui qui vous intéresse.

Brut, peut-être, mais cela devrait vraiment fonctionner.

jquery exécutera les deux gestionnaires car il autorise plusieurs gestionnaires d'événements. J'ai créé un exemple de code. Tu peux l'essayer

démo