Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Reihenfolge des jQuery-Ereignisflusses

Detaillierte Erläuterung der Reihenfolge des jQuery-Ereignisflusses

零下一度
零下一度Original
2017-06-17 17:38:341342Durchsuche

Stellt Ihnen jQueryEreignissequenzen und andere Ressourcen zur Verfügung. Sie können diese Website gerne mit Ihren Lesezeichen versehen. Wir stellen Ihnen die neuesten jQuery-Ereignisflusssequenzressourcen zur Verfügung

<p id="aaron">    <p id=&#39;test&#39;>         <ul>             <p>点击p被委托,ul被阻止了,因为内部重写了事件对象</p>         </ul>    </p> </p>v>
Testcode

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;) })
ausgelöste Ergebnisse:

test 委托到p触发 被阻止了 mousedown body
Entsprechend dem Ereignisfluss von

W3C das Ziel zum Blasen erfassen

Sie können sehen, dass der

p,ul-Knoten das Ziel früher kontaktiert als der #test p-Knoten, aber da p,ul eine Blase ist, die an #aaron p gebunden ist, also

Priorität sollte niedriger sein als #test

, aber die Priorität desselben Elements basiert auf der Verschachtelungsreihenfolge der Elemente. Je näher ein Satz am Ziel ist, desto eher wird er ausgelöst

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Reihenfolge des jQuery-Ereignisflusses. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:jQuery-GrößenalgorithmusNächster Artikel:jQuery-Größenalgorithmus