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
由此：事件的捕獲過程總是優先於事件的冒泡過程