web-dev-qa-db-fra.com

jQuery: plusieurs gestionnaires pour un 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-t-il" ou les deux gestionnaires seront-ils exécutés?

javascriptjqueryevent-handling
128
flybywire

Les deux gestionnaires s'exécuteront, le modèle d'événement jQuery autorisant plusieurs gestionnaires sur un élément. Par conséquent, un gestionnaire ultérieur ne remplace pas un gestionnaire plus ancien.

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

157
Russ Cam

Supposons que vous avez deux gestionnaires, f et g, et que vous voulez 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 manière, il n'y a (du point de vue de jQuery) que le gestionnaire one, qui appelle f et g dans l'ordre spécifié.

35
Stephan202

jQuery's .bind () se déclenche dans l'ordre dans lequel il était lié:

Lorsqu'un événement atteint un élément, tous les gestionnaires liés à cet événement Les types pour l'élément sont renvoyés. S'il y a plusieurs gestionnaires enregistrés, ils exécuteront toujours dans l'ordre dans lequel ils étaient lié. Une fois tous les gestionnaires exécutés, l’événement se poursuit le chemin de propagation d'événement normal.

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

Comme les autres fonctions de jQuery (ex. .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.

17
allicarn

Vous devriez pouvoir utiliser le chaînage pour exécuter les événements en séquence, 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 aussi:

Lorsqu'un événement atteint un élément, tous les gestionnaires liés à cet événement Les types pour l'élément sont renvoyés. S'il y a plusieurs gestionnaires enregistrés, ils exécuteront toujours dans l'ordre dans lequel ils étaient lié. Une fois tous les gestionnaires exécutés, l’événement se poursuit le chemin de propagation d'événement normal.

9
anddoutoi

Les deux gestionnaires se font appeler.

Vous pensez peut-être à la liaison d'événement inline (par exemple "onclick=..."), où un inconvénient majeur 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 autorise enregistrement de plusieurs événements auditeurs sur un seul EventTarget. À Pour ce faire, les auditeurs d’événements ne sont pas plus stocké en tant que valeurs d'attribut

2
Crescent Fresh

Le fait fonctionner 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 leur identifiant 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. Cela at-il été ainsi 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 auditeurs d'événements:

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énement ont également fonctionné. Nous avons utilisé Chrome pour le tester.

2
GeneralElektrix

Il existe une solution de contournement pour garantir qu'un gestionnaire se répète après l'autre: attachez le deuxième gestionnaire à un élément conteneur et laissez l'événement s'afficher. 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 ça devrait marcher.

1
David

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

0
Vikram Rajput