js中addEventListener第三个参数涉及到的事件捕获与冒泡

Posted 2020-09-17

js中，我们可以给一个dom对象添加监听事件，函数就是

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

很容易理解，第一个参数是事件类型，比如点击(click)、触摸(touchstart)，

第二个参数就是事件函数，

比如我给一个button添加alert函数。

window.onload=function(){
document.getElementById("hello").addEventListener("onkeydown",function () {
alert("hello");
});
}

那么第三个参数是什么呢？这个参数设计到事件的捕获与冒泡，为true时捕获，false时冒泡。

什么意思呢？

我举个简单的例子，我有两个div和一个button，button在div2里面，div2在div1里面。如下图所示

 

给button、div1、div2、都添加了click事件，分别alert button、div1、div2。

window.onload=function(){
document.getElementById("btn").addEventListener("click",function () {
// body...
alert("hello");
});
document.getElementById("div1").addEventListener("click",function(){
alert("div1");
});
document.getElementById("div2").addEventListener("click",function(){
alert("div2");
});
}

那么问题就来了，我点击button，也相当于点击了div1和div2，那么，谁先出现呢？

直观的讲，谁在上面，谁在下面。

所以，在js中就分为了两个处理方法，冒泡和捕获。

冒泡：从里面往外面触发事件，就是alert的顺序是 button、div2、div1。

捕获：从外面往里面触发事件，就是alert的顺序是div1、div2、button。

要想冒泡，就要将每个监听事件的第三个参数设置为false,也就是默认的值。

要想捕获，就要将每个监听事件的第三个参数设置为true。

好了，就讲这么多了。为了更好的理解冒泡和捕获，大家可以给三个事件的第三个参数随便设置，就是说不同时设置为true或false,

给button为true，div1为false等等，根据结果就能更好的理解这两个概念了。