极客教程HTML 事件传播，捕获和冒泡是什么
在这篇文章中，我们将学习事件传播，捕获和冒泡。
事件传播 确定元素接收事件的顺序。处理HTML DOM事件传播顺序有两种方式：事件冒泡和事件捕获。
例如，假设有三个组件，分别是component1，component2和component3。在这些组件中，我们附加了onClickEventListener事件处理程序。现在当我们点击component3时，所有三个组件的事件处理程序都会执行。现在问题是事件将按照什么顺序执行。现在事件冒泡和捕获就出现了。
1. 冒泡： 当事件发生在组件上时，首先运行它上面的事件处理程序，然后在其父组件上运行，然后在其他祖先组件上依此类推。默认情况下，所有事件按照从中心组件事件到最外层组件事件的顺序处理。
示例： 在这个例子中，我们将创建三个div组件，每个组件都有一个事件处理程序。当我们点击component3时，将弹出警示框显示为“component 3 event clicked”，然后依次显示“component 2 event clicked”和“component 1 event clicked”。这就是事件从“底部到顶部”的冒泡过程。
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: lightgreen;
padding: 24px;
border: 1px solid black;
}
#div2 {
background-color: yellow;
padding: 18px;
border: 1px solid black;
}
#div3 {
background-color: orange;
border: 1px solid black;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksForGeeks</h1>
<h3>What is Event propagation, capturing, bubbling?</h3>
<div id="div1">
Component 1
<div id="div2">
component 2
<div id="div3">
component 3
</div>
</div>
</div>
<!-- Javascript code for event bubbling -->
<script>
let div1 = document.querySelector("#div1");
let div2 = document.querySelector("#div2");
let div3 = document.querySelector("#div3");
div1.addEventListener("click", function (event) {
alert("Component 1 event clicked");
});
div2.addEventListener("click", function (event) {
alert("Component 2 event clicked");
});
div3.addEventListener("click", function (event) {
alert("Component 3 event clicked");
});
</script>
</body>
</html>
输出：
2. 捕获： 这是冒泡的相反过程。事件处理程序首先在其父组件上触发，然后在实际上想要触发该事件处理程序的组件上触发。简而言之，它意味着事件首先被最外层元素捕获，然后传播到内部元素。也称为“自上而下”。
示例： 在这个示例中，我们将创建三个div组件，每个组件都有一个事件处理程序。当我们点击div组件3事件时，它会弹出一个警报框显示“组件1事件被点击”，然后一直向下显示“组件2事件被点击”和“组件3事件被点击”。这就是事件捕获或从“顶部到底部”的传播方式。
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: lightgreen;
padding: 24px;
border: 1px solid black;
}
#div2 {
background-color: yellow;
padding: 18px;
border: 1px solid black;
}
#div3 {
background-color: orange;
border: 1px solid black;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksForGeeks</h1>
<h3>What is Event propagation, capturing, bubbling?</h3>
<div id="div1">
Component 1
<div id="div2">
component 2
<div id="div3">
component 3
</div>
</div>
</div>
<!-- Javascript code for event capturing -->
<script>
let div1 = document.querySelector("#div1");
let div2 = document.querySelector("#div2");
let div3 = document.querySelector("#div3");
div1.addEventListener("click", function (event) {
alert("Component 1 event clicked");
}, true);
div2.addEventListener("click", function (event) {
alert("Component 2 event clicked");
}, true);
div3.addEventListener("click", function (event) {
alert("Component 3 event clicked");
}, true);
</script>
</body>
</html>
输出：
