其实在JavaScript中，说到事件冒泡还有两个个不得不提的事件捕获和默认事件，我们先来说一下事件捕获,如图
HTML代码
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4"></div>
</div>
</div>
</div>
css代码
* {
margin: 0;
padding: 0;
}
.box1 {
width: 400px;
height: 400px;
background: red;
}
.box2 {
width: 300px;
height: 300px;
background: yellow;
}
.box3 {
width: 200px;
height: 200px;
background: skyblue;
}
.box4 {
width: 100px;
height: 100px;
background: green;
}
js代码
// 04事件捕捉
// addEventListener("事件",function(){},fasle(默认,事件冒泡阶段执行)/true)
// 事件监听
var oBox1=document.getElementsByClassName("box1")[0];
var oBox2=document.getElementsByClassName("box2")[0];
var oBox3=document.getElementsByClassName("box3")[0];
var oBox4=document.getElementsByClassName("box4")[0];
oBox1.addEventListener("click",function(ev){
var ev=ev
window.event;
console.log("box1");
// alert("box1");
},true)
oBox2.addEventListener("click",function(ev){
var ev=ev
window.event;
console.log("box2");
// alert("box1");
},true)
oBox3.addEventListener("click",function(ev){
var ev=ev
window.event;
console.log("box3");
// alert("box1");
},true)
oBox4.addEventListener("click",function(ev){
var ev=ev
window.event;
console.log("box4");
// alert("box1");
},true)
