Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de l'ordre du flux d'événements jQuery

零下一度
Libérer: 2017-06-17 17:38:34
original
1348 Les gens l'ont consulté

Vous fournit une séquence jQueryd'événements et d'autres ressources. Vous êtes invités à ajouter ce site à vos favoris. Nous vous fournirons les dernières ressources de séquence de flux d'événements jQuery

<p id="aaron">    <p id=&#39;test&#39;>         <ul>             <p>点击p被委托,ul被阻止了,因为内部重写了事件对象</p>         </ul>    </p> </p>v>
Copier après la connexion
Code de test

var aaron = $("#aaron") //同一个元素上绑定不同的事件委托 aaron.on(&#39;mousedown&#39;,&#39;p&#39;,function(e){     console.log(&#39;委托到p触发&#39;)   // e.stopPropagation() }) aaron.on(&#39;mousedown&#39;,&#39;ul&#39;,function(e){     console.log(&#39;被阻止了&#39;) })  aaron.on(&#39;mousedown&#39;,function(e){   console.log(&#39;mousedown&#39;) })  $("#test").on(&#39;mousedown&#39;,function(){   console.log(&#39;test&#39;) })  $("body").on(&#39;mousedown&#39;,function(){   console.log(&#39;body&#39;) })
Copier après la connexion
résultats déclenchés :

test 委托到p触发 被阻止了 mousedown body
Copier après la connexion
Selon le flux d'événements du

W3C, capturez la cible à bulle

Vous pouvez voir que le nœud

p,ul contacte la cible plus tôt que le nœud #test p, mais comme p,ul est une bulle liée à #aaron p, donc

priorité doit être inférieur à #test

mais la priorité du même élément sera basée sur l'ordre d'imbrication des éléments. Quoi qu'il en soit, plus une phrase est proche de la cible, plus vite elle sera déclenchée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal