js中监听事件addEventListener第三个参数的理解（事件的冒泡与捕获）

js中监听事件addEventListener第三个参数的理解（事件的冒泡与捕获）

js中，可以给一个dom对象添加监听事件，像下面这样：

domElement.addEventListener("click", function(){}, true);

第一个参数是事件类型，比如点击(click)、双击(dbclick)

第二个参数就是函数，触发事件后，需要执行的函数。

而第三个参数就是事件的捕获与冒泡， 为true时捕获，false时冒泡。

​

三个参数介绍完了，第三个参数怎么理解，看下面

这里有三个叠放在一起的div，并且三个div都绑定了click事件

function div1SayHello() {
  console.log('hello, i am div1');
}
function div2SayHello() {
  console.log('hello, i am div2');
}
function div3SayHello() {
  console.log('hello, i am div3');
}
// 第三个参数为true，则为捕获
document.getElementById('div1').addEventListener('click', div1SayHello, true)
document.getElementById('div2').addEventListener('click', div2SayHello, true)
document.getElementById('div3').addEventListener('click', div3SayHello, true)

​

那么，由于事件穿透，我点击div3，也相当于点击了div1和div2，那么，事件触发顺序是什么呢？

也就是说，谁先sayHello

而这就跟监听事件的第三个参数有关系了，也就是事件的冒泡和捕获。

冒泡：从dom树的最下面往上面一层层的执行事件， sayHello的顺序是 div3、div2、div1。

捕获：从dom树的最上面往下面一层层的执行事件， sayHello的顺序是 div1、div2、div3。

可以给三个事件的第三个参数随便设置true或false，根据结果就能更好的理解这两个概念了。