元素多个事件的处理顺序

1.给dom元素绑定事件

<div id="box"></div>

2.简单设置一下样式

#box{
    width: 100px;
    height: 100px;
    background-color: deepskyblue;
}

3.通过js绑定事件,后面的事件会覆盖前面的事件

var box=document.getElementById("box");
box.onclick=function(){  // 不执行
    alert(1);
}
box.onclick=function(){ // 执行
    alert(2);
}

4.通过jquery绑定事件，会按照顺序执行

$("#box").click(function(){  // 执行弹出1 
    alert(1);
})
$("#box").click(function(){ // 执行弹出2
    alert(2);
})

5.通过addEvenetListener绑定事件，按照代码顺序执行

var box=document.getElementById("box");
box.addEventListener('click',function(){alert(1)},false) // 弹出1
box.addEventListener('click',function(){alert(2)},false) // 弹出2
box.addEventListener('click',function(){alert(3)},true)  // 弹出3
// addEventListener的第三个参数代表的是事件执行的时机，true代表在捕获阶段执行，false代表是在冒泡阶段执行,默认是false

转载于:https://www.cnblogs.com/bonly-ge/p/9327547.html