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越近的越早触发