<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.div1{
width:400px;
height:400px;
background-color: green;
}
.div2{
width:300px;
height:300px;
background-color: red;
}
.div3{
width:200px;
height:200px;
background-color: blue;
}
.div4{
width:100px;
height:100px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<div class="div1 aa">div1
<div class="div2 aa">div2
<div class="div3 aa">div3
<div class="div4 aa">
div4
</div>
</div>
</div>
</div>
<script>
var divs=document.querySelectorAll('.aa')
//console.log(divs)
for(const div of divs){
div.addEventListener("click",function(event){
console.log(this.className) //都是默认时冒泡 未阻止 点击 div4时打印 div4 aa div3 aa...div1 aa 若开启阻止则点击div4时只打印div4 aa
event.stopPropagation();//阻止冒泡 捕获 捕获true 未阻止 点击 div4时打印 div1 aa div2 aa...div4 aa 若开启阻止则点击任何div时只打印div1 aa
},true)//true是捕获 默认是false冒泡
}
</script>
</body>
</html>
