js的addEventListener第三个参数相关

addEventListener示例代码

html代码：

<div class="box1" id="box1">
    <div class="box2"></div>
</div>

css代码：

.box1 {
    width: 500px;
    height: 500px;
    background-color: pink;
}
.box2 {
    width: 300px;
    height: 300px;
}   

js代码块：

var box1 = document.getElementById("box1");
var box2 = box1.children[0];

box1.addEventListener("click",function(){
    alert("我是box1");
},true);
box2.addEventListener("click",function(){
    alert("我是box2");
},true);
document.addEventListener("click",function(){
    alert("我是document");
},true);

addEventListener第三个参数详解

1、当addEventListener全为true时，弹出提示信息顺序是：
我是document > 我是box1 > 我是box2
当addEventListener全为false时，弹出提示信息顺序是：
我是box2> 我是box1 > 我是document

由此：addEventListener第三个参数bool类型，意思是 “是否使用捕获” （useCapture），如果为true为捕获获取（由外向里），为false时为冒泡获取（由里向外）。

2、当addEventListener有的是true，有的是false时，弹出提示信息顺序总是true优先于flase
由此：事件的捕获过程总是优先于事件的冒泡过程