<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<script>
// 当两个盒子重叠，且都有相同事件绑定，点击公共部分，触发顺序问题？（以点击事件为例）
// 当发生点击事件，事件处理机制会默认从html、body、box1、box2、box2、box1、body、html依次查找带有点击事件的元素，至于对应点击事件的callback是否执行，需要根据addEventListener('click',callback,[boolean])在注册时，设置的布尔值。
// 如果布尔值为true，则表示该点击事件的callback只能在捕获阶段执行；如果布尔值为false，则表示该点击事件的callback只能在冒泡阶段执行；该方式绑定事件默认boolean为false，即默认在冒泡阶段执行callback。
const callback1 = function () {
console.log("box1");
};
const callback2 = function () {
console.log("box2");
};
document
.querySelector(".box1")
.addEventListener("click", callback1, true);
document.querySelector(".box2").addEventListener("click", callback2);
// 当通过element.on'事件'=function(){} 方式绑定事件，则表示该事件的回调在事件冒泡阶段执行。
</script>
</body>
</html>
