Quel sera l'ordre d'exécution si j'attache deux mêmes événements sur un DOM

Question

Si j'attache deux événements de clic sur un élément, quel sera l'ordre d'exécution du deux gestionnaire. Je sais que l'ordre d'exécution pour jQuery est le même que l'ordre dans lequel les événements ont été attachés. Mais je ne suis pas sûr du comportement avec JavaScript.

Si ce que le gestionnaire ajoute des événements alors si je veux gestionnaire remplacer tous les événements existants comment puis-je faire?

Answer 1

The handlers will execute in the order in which they were bound.

Le DOM3 event spec, introduit l'exigence qu'ils soient tirés pour l'enregistrement (ce que la plupart des navigateurs):

Ensuite, la mise en œuvre doit déterminer l'événement candidat de la cible actuelle des auditeurs. Ce doit être la liste de tous les écouteurs d'événement qui ont été enregistrés sur la cible actuelle dans leur ordre d'enregistrement.

De developer.mozilla.org

Événements dans la phase cible déclenchera tous les auditeurs sur un élément dans l'ordre de leur enregistrement, quelle que soit la useCapture parameter.-

En outre: Javascript event order

Answer 2

Si tout ce que vous voulez est de supprimer ou de remplacer les gestionnaires d'événements attachés par jQuery avec .on() méthode alors vous pouvez utiliser la méthode .off() respectivement pour les supprimer. Puis ajoutez à nouveau le gestionnaire que vous voulez utiliser. Consultez la documentation here.

Disons que les gestionnaires que vous savez qu'ils sont déjà attachés sont nommés fonctions comme ceci:

function someHandler(e) { 
    // do something with the event e 
} 

$('#myElement').on('click', someHandler); 

Vous pouvez supprimer celui-ci en appelant

$('#myElement').off('click', someHandler); 

Si les gestionnaires que nous fonctions anonymes comme si :

$('#myElement').on('click', function(e) { ... }); 

alors vous devez supprimer tous les écouteurs ci-joints avec jQuery (jQuery garde la trace des événements/auditeurs/gestionnaires attachés)

$('#myElement').off('click'); // remove ALL handlers for the event