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
由此：事件的捕获过程总是优先于事件的冒泡过程