在 JavaScript 中，事件冒泡和捕获是事件传播的两种机制。当一个事件（如点击、按键等）发生在某个元素上时，浏览器会按照事件冒泡或捕获的顺序执行一系列的事件处理函数。了解这两种机制及其运用可以帮助我们更好地控制和处理事件。
事件冒泡（Event Bubbling）
事件冒泡是指事件从触发元素开始，逐级向上传播到最外层的根元素。在这个过程中，每一层元素都可以监听该事件，并执行相应的事件处理函数。事件冒泡的优点是可以方便地处理跨组件的事件，但缺点是可能导致不必要的处理函数执行。
运用事件冒泡的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Bubbling Example</title>
<style>
.outer { width: 200px; height: 200px; background-color: red; }
.inner { width: 100px; height: 100px; background-color: blue; }
</style>
<script>
document.querySelector('.outer').addEventListener('click', function() {
alert('Outer element clicked');
});
document.querySelector('.inner').addEventListener('click', function(event) {
alert('Inner element clicked');
});
</script>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
在这个示例中，当点击内部元素时，会先触发内部元素的点击事件处理函数，然后触发外部元素的点击事件处理函数。
事件捕获（Event Capturing）
事件捕获是指事件从最外层的根元素开始，逐级向下传播到触发元素的父元素。在这个过程中，每一层元素都可以监听该事件，并执行相应的事件处理函数。事件捕获的优点是可以提前处理事件，但缺点是可能导致不必要的事件处理函数执行。
运用事件捕获的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Capturing Example</title>
<style>
.outer { width: 200px; height: 200px; background-color: red; }
.inner { width: 100px; height: 100px; background-color: blue; }
</style>
<script>
document.querySelector('.outer').addEventListener('click', function() {
alert('Outer element clicked');
}, true); // 使用事件捕获
document.querySelector('.inner').addEventListener('click', function(event) {
alert('Inner element clicked');
});
</script>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
在这个示例中，当点击内部元素时，会先触发外部元素的点击事件处理函数，然后触发内部元素的点击事件处理函数。
总结
事件冒泡和事件捕获都可以用于处理跨组件的事件，但它们的执行顺序不同。事件冒泡从触发元素向上传播，而事件捕获从根元素向下传播。在实际应用中，可以根据需要选择使用事件冒泡或事件捕获。
