关于jquery中各种绑定事件的执行顺序

话不多说，直接上代码：

<div id='p1' style="padding:50px;background: #ccc">点击1

<div id='p2' style="padding:50px;background: #a9ea00">点击2

<p id="p3" style="padding:50px;background:#f00">点击3

</p>

</div>

var p1 = $('#p1')

p1.on('click',function(){

alert('1')

})

var p2 = $('#p2')

p2.on('click','a,p',function(e){

alert("2==="+e.currentTarget.nodeName)

})

p2.on('click',function(e){

alert('2');

//e.stopPropagation();

})

var p3 = $('#p3')

p3.on('click','a',function(e){

alert("3==="+e.currentTarget.nodeName)

})

p3.on('click',function(){

alert('3')

})

var p4 = $('#p4')

p4.on('click',function(e){

alert('p4');

})

</script>

测试结果

点击a时:
执行顺序：p4 –>3===A –>3 –>2===A –>2===P –>2 –>1
事件来源： a自身、3委托给a、3自身、2委托给a、2委托给3、2自身、1自身
点击p3时:
执行顺序：3 –>2===P –>2 –>1
事件来源：3自身、2委托给3、 2自身、1自身

通过上面的测试结果，我们不难发现，在jquery的事件绑定中，事件执行的原则是：
1、如果一个元素没有委托事件，则只执行自己的事件，

2、如果一个元素有委托事件，先执行委托事件，再执行自己的。对于多个委托事件，按节点层次由深到浅的顺序执行。

3、当点击一个元素时，如果其父元素(包括祖先元素，直到html)也有事件，而自己本身没有阻止冒泡的话，会按从内到外的顺序，根据1和2的规则依次执行所有事件。

贵兴博客