詳解jQuery事件流的順序

為您提供jQuery事件流的順序等資源，歡迎您收藏本站，我們將為您提供最新的jQuery事件流的順序資源

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

測試程式碼

var aaron = $("#aaron") //同一个元素上绑定不同的事件委托 aaron.on('mousedown','p',function(e){     console.log('委托到p触发')   // e.stopPropagation() }) aaron.on('mousedown','ul',function(e){     console.log('被阻止了') })  aaron.on('mousedown',function(e){   console.log('mousedown') })  $("#test").on('mousedown',function(){   console.log('test') })  $("body").on('mousedown',function(){   console.log('body') })

觸發的的結果：

test 委托到p触发 被阻止了 mousedown body

根據W3C的事件流，捕獲到目標到冒泡

可以看到

p,ul節點雖然比#test p節點更早接觸到target但是由於p,ul是綁定在#aaron p上的冒泡，所以優先權要低於#test

但是同一個元素的優先級，就要根據元素的巢狀順序了。反正一句話離目標taget越近的越早觸發

以上是詳解jQuery事件流的順序的詳細內容。更多資訊請關注PHP中文網其他相關文章！