事件捕获和事件冒泡
<style>
.a {
width: 600px;
height: 600px;
background-color: pink;
}
.b {
width: 400px;
height: 400px;
background-color: red;
}
.c {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
<body>
<div class="a">
<div class="b">
<div class="c">
</div>
</div>
</div>
</body>
<script>
let a = document.querySelector('.a')
let b = document.querySelector('.b')
let c = document.querySelector('.c')
a.addEventListener('click', () => {
console.log("1---事件捕获")
}, true)
a.addEventListener('click', () => {
console.log("1---事件冒泡")
}, false)
b.addEventListener('click', () => {
console.log("2---事件捕获")
}, true)
b.addEventListener('click', () => {
console.log("3---事件冒泡")
}, false)
c.addEventListener('click', () => {
console.log("3---事件捕获")
}, true)
c.addEventListener('click', () => {
console.log("3---事件冒泡")
}, false)
</script>