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?
javascript
jquery
event-handling
flybywire
la source
la source
jQuery('.btn').on('click',handlerClick);
est appelé à divers endroits sans.off
qu'il soit réellement nécessaire?bind
méthode. Voir ceci pour plus de détails: learn.jquery.com/jquery-ui/widget-factory/…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:
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é.
la source
.bind () de jQuery se déclenche dans l'ordre dans lequel il a été lié :
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.la source
Vous devriez pouvoir utiliser le chaînage pour exécuter les événements dans l'ordre, par exemple:
Je suppose que le code ci-dessous fait la même chose
Source: http://www.peachpit.com/articles/article.aspx?p=1371947&seqNum=3
TFM dit également:
la source
When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound. After all handlers have executed, the event continues along the normal event propagation path.
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 :
la source
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:
Lorsque le contenu de searchtab1 change, je souhaite mettre à jour searchtab2 et searchtab3. Je l'ai fait de cette façon pour l'encapsulation:
Écouteurs d'événements multiples:
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.
la source
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.
la source
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
la source