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