jQuery事件流的順序

<div id="aaron">
   <div id='test'>
        <ul>
            <p>點擊p被委托,ul被阻止了,因為內部重寫了事件對象</p>
        </ul>
   </div>
</div>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 div節點更早接觸到target但是由於p,ul是綁定在#aaron div上的冒泡，所以優先級要低於#test

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