执行顺序为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;
  • [x] 总结：
  • addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。
  • 此外，addEventListenert方法第一个参数填写事件名，注意不需要写on，第二个参数可以是一个函数，第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序,如果为true代表捕获阶段处理,如果是false代表冒泡阶段处理，第三个参数可以省略，大多数情况也不需要用到第三个参数。

addEventListener第三个参数的使用

  1. 如果我给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
　

  1. 事件冒泡执行过程：(参数为false)

    从最具体的的元素（你单击的那个元素）开始向上开始冒泡，拿我们上面的案例讲它的顺序是：child->box

  2. 事件捕获执行过程：(参数为true)

    从最不具体的元素（最外面的那个盒子）开始向里面冒泡，拿我们上面的案例讲它的顺序是：box->child

版权声明：本文为sakura-sakura原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/sakura-sakura/p/6678345.html