Detailed explanation of the order of jQuery event flow

Provide you with jQueryEvent flow sequence and other resources, you are welcome to bookmark this site, we will provide you with the latest jQuery event flow sequence resources

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

Test code

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') })

Triggered result:

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

According to the event flow of W3C, the target is captured and bubbled

can be seen

Although the p, ul node contacts the target earlier than the #test p node, because p, ul is bound to the bubble on #aaron p, the priority is lower than #test

But the priority of the same element depends on the nesting order of the elements. Anyway, the closer a sentence is to the target, the sooner it will be triggered

The above is the detailed content of Detailed explanation of the order of jQuery event flow. For more information, please follow other related articles on the PHP Chinese website!