一、事件捕获
1.概念
2.图解
二、事件冒泡
1.概念
2.图解
三、DOM事件流
1.概念
2.图解
3.示例
<!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>事件</title>
<style>
.boxA {
width: 200px;
height: 200px;
background-color: blueviolet;
}
.boxB {
width: 100px;
height: 100px;
background-color: pink;
}
.boxC {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="boxA" id="boxA">
<div class="boxB" id="boxB">
<div class="boxC" id="boxC">目标</div>
</div>
</div>
<script>
let boxA = document.getElementById("boxA");
let boxB = document.getElementById("boxB");
let boxC = document.getElementById("boxC");
//目标元素
boxC.addEventListener('click', function () { console.log("target1"); }, true);
boxC.addEventListener('click', function () { console.log("target2"); }, true);
// 事件冒泡
boxB.addEventListener('click', function () { console.log("bubble1"); }, false);
boxB.addEventListener('click', function () { console.log("bubble2"); }, false);
// 事件捕获
boxA.addEventListener('click', function () { console.log("capture1"); }, true);
boxA.addEventListener('click', function () { console.log("capture2"); }, true);
</script>
</body>
</html>
4.结果
五、事件捕获或事件冒泡的阻止
1.用法
#当在事件流执行过程中，需要阻止后续的事件的执行，可以使用以下语法
event.stopPropagation();
2.示例
<!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>事件</title>
<style>
.boxA {
width: 200px;
height: 200px;
background-color: blueviolet;
}
.boxB {
width: 100px;
height: 100px;
background-color: pink;
}
.boxC {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="boxA" id="boxA">
<div class="boxB" id="boxB">
<div class="boxC" id="boxC">目标</div>
</div>
</div>
<script>
let boxA = document.getElementById("boxA");
let boxB = document.getElementById("boxB");
let boxC = document.getElementById("boxC");
//目标元素
boxC.addEventListener('click', function (e) { console.log("target1"); e.stopPropagation(); }, true);
boxC.addEventListener('click', function () { console.log("target2"); }, true);
// 事件冒泡
boxB.addEventListener('click', function () { console.log("bubble1"); }, false);
boxB.addEventListener('click', function () { console.log("bubble2"); }, false);
// 事件捕获
boxA.addEventListener('click', function () { console.log("capture1"); }, true);
boxA.addEventListener('click', function (e) { console.log("capture2"); }, true);
</script>
</body>
</html>
3.结果
