addeventlistener和onclick的区别
执行顺序为method1->method2->method3
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
如果这样写,那么将会只有medhot3被执行
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
- addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。
- 此外,addEventListenert方法第一个参数填写事件名,注意不需要写on,第二个参数可以是一个函数,第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序,如果为true代表捕获阶段处理,如果是false代表冒泡阶段处理,第三个参数可以省略,大多数情况也不需要用到第三个参数。
addEventListener第三个参数的使用
- 如果我给box加click事件,如果我直接单击box没有什么问题,但是如果我单击的是child元素,那么它是怎么样执行的?(执行顺序)
html
<div id="box">
<div id="child"></div>
</div>
js
box.addEventListener("click",function(){
console.log("box");
})
child.addEventListener("click",function(){
console.log("child");
})
// 执行的结果: child box
//说明:默认情况事件是按照事件冒泡的执行顺序进行的。
如果第三个参数写的是true,则按照事件捕获的执行顺序进行的。
box.addEventListener("click",function(){
console.log("box");
},true)
child.addEventListener("click",function(){
console.log("child");
},true)
执行的结果:
box
child
-
事件冒泡执行过程:(参数为false)
从最具体的的元素(你单击的那个元素)开始向上开始冒泡,拿我们上面的案例讲它的顺序是:child->box
-
事件捕获执行过程:(参数为true)
从最不具体的元素(最外面的那个盒子)开始向里面冒泡,拿我们上面的案例讲它的顺序是:box->child