La priorité lorsque plus d'un gestionnaire d'événement est lié à un élément

Lorsque plus d'un gestionnaire d'événement est lié à un élément, comment est-il déterminé qui est déclenchée en premier?

<script> 
$(function(){
    $(".li").find('input').click(function(){alert('li>input');});
    $(".li").click(function(){alert('li');});
    $('input').click(function(){alert('input');});
});
</script>
</head>

<body>
<ul>
<li class="li"><input type="checkbox" /><span>Hello</span></li>
<li class="li"><input type="checkbox" /><span>Hello</span></li>
<li class="li"><input type="checkbox" /><span>Hello</span></li>
</ul>
</body>
InformationsquelleAutor user1032531 | 2012-01-08
  1. 36

    Si deux gestionnaires d'événements sont liés à l'exact le même objet, il serait le premier venu, premier servi. Le premier attaché exécuté en premier.

    Mais, votre exemple est un peu différent. Il semble que vous aussi avez un événement lié à la input objet et d'autres pour le parent li objet. Dans ce cas, celui où l'événement provient en fait (sans doute le input élément dans ce cas) va se produire en premier, puis l'événement fera des bulles à la mère objets et il se fera plus tard.

    Si vous souhaitez arrêter la propagation aux parents, vous pouvez utiliser du jQuery événement.stopPropagation() et l'événement ne seront pas atteindre les parents et de ne jamais déclencher leurs gestionnaires d'événements. Qui ressemblerait à ceci:

    $('input').click(function(e) {
    e.stopPropagation();
    alert('input');
});

    Par le jQuery documentation pour stopPropagation(), il n'arrête pas d'autres gestionnaires d'événements sur le même objet, seuls les gestionnaires d'événements sur les objets parents qui seraient normalement obtenir l'événement via remonter l'arbre-mère.

    Vous pouvez voir la différence ici: http://jsfiddle.net/jfriend00/L33aq/

    • Grande Réponse et Explication . Qu'advient-il si l'événement est forcé de capture au lieu de remonter ?
    • Voir javascript.info/tutorial/bubbling-and-capturing pour une description complète de la façon dont vous pourriez utiliser la capture.
    InformationsquelleAutor jfriend00
  2. 65

    Je tiens à souligner que le "premier venu, Premier servi" la règle n'est pas toujours vrai, cela dépend aussi de la façon dont vous enregistrez un gestionnaire:

    Handler1 - $(document).on('click', 'a', function....)
Handler2 - $('a').on('click', function....)

    Cela l'exemple ci-dessus, le Gestionnaire d'2 est toujours appelée avant la handler1.

    Ont un coup d'oeil à ce violon: http://jsfiddle.net/MFec6/

    • pourquoi est-sat comportement?
    • La raison pour cela est parce que des bulles se forment. Handler1 dans l'exemple ci-dessus n'est pas en fait, rattaché à la a tag. Au lieu de cela, il est attaché à la document. Ainsi, Handler2 est exécutée, puis l'événement bulles jusqu'à ce qu'il frappe le document et jQuery recherche par le biais d' documents'événement délégations de vérifier si l'élément qui a déclenché l'événement correspond au sélecteur de condition dans le second paramètre de on pour Handler1. En réalité, il est vrai que c'est "Premier arrivé, premier servi". Bouillonnante, c'est une autre histoire.
    • +1 Merci pour cette réponse. J'ai été frapper ma tête contre le mur questionnement premier ARRIVÉ, premier servi - et puis, maintenant, il fait sens.
    • Si il y a deux ou plusieurs gestionnaires attaché à l'événement click de dire #someID alors il est essentiellement PAPS droit?
    • Oui! 🙂 C'est tous ARRIVÉ. Il y a certains grands matériaux sur la remontée d'événements ici qui peuvent vous aider à comprendre les événements d'ordre de tir. C'est tous ARRIVÉ, à commencer par la cible de l'événement de l'élément des gestionnaires, et par la propagation de travailler son chemin jusqu'à la DOM de l'élément racine.
    • j'ai aussi lu que si utilisé correctement Handler1 approche est meilleure que la Handler2.. comme $('#parentDIV').on('click', 'a', function....) attache un seul auditeur sur les parents, mais que Handler2 à joindre à chaque a.Donc, nous devrions préférer le Handler1 approche, quand nous le pouvons?
    • J'ai vécu et que $document.on('x', function(){}) est appelé /après/ $document.on('x', '...', function(){}), même si ce dernier est attaché dernier.
    • Flash est encore une décennie d'avance de HTML. Non seulement le support de Flash, que toutes ces choses avec la méthode addEventListener, removeEventListener, stopPropagation, stopImmediatePropagation, il prend également en charge une "priorité" paramètre de sorte que vous pouvez définir l'ordre dans lequel les auditeurs s'exécuter, qui est de plus haute priorité en premier, suivi par la commande ci-joint. Il prend même en charge attacher les auditeurs comme des références faibles. help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/... C'est incroyable de voir comment supérieure AS3 est à JavaScript (+jQuery, lol).
    • Autre chose que vous devez savoir est que, depuis le Gestionnaire d'1 est attaché à document et pas le a élément, toute nouvelle a éléments créés après l'événement est affecté ont encore le gestionnaire. Dans le Gestionnaire 2, de nouveaux éléments créés après que le gestionnaire n'aurez pas le gestionnaire d'événements.

    InformationsquelleAutor David Lin
  3. 4

    Premier arrivé, premier servi. Le premier, lié sera le premier déclenchée, et ainsi de suite...

    Connexes: jQuery gestionnaires d'événements toujours exécuter dans l'ordre où elles ont été liés moyen de contourner ce problème?

    InformationsquelleAutor karim79