详解jQuery事件流的顺序

<p id="aaron">    <p id='test'>         <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事件流的顺序的详细内容，更多请关注Gxl网其它相关文章！