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

javascript/jquery

浏览数:4

2020-5-23

AD:资源代下载服务

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,根据结果就能更好的理解这两个概念了。

作者:艾欢欢