1. 90前端首页
  2. 前端开发
  3. JavaScript

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

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

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

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

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

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

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

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

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

这里有三个叠放在一起的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。

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

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

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

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

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000022084049

展开阅读全文

发表评论

登录后才能评论