事件捕获和冒泡是什么？
在JavaScript中，事件传递有两种模式：事件捕获和事件冒泡。
事件捕获是从最外层的元素开始往内层元素传递，直到目标元素。而事件冒泡则是从目标元素开始往外层元素传递，直到最外层的元素。
通俗来说，事件捕获是从上往下，而事件冒泡是从下往上。
如何理解？
我们可以通过以下代码来理解事件捕获和冒泡：
<div id="outer">
<div id="inner"></div>
</div>
<script>
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
outer.addEventListener("click", function() {
console.log("outer clicked");
}, true);
inner.addEventListener("click", function() {
console.log("inner clicked");
}, true);
</script>
上面的代码中，我们有两个
元素，一个是外层的
，另一个是内层的
。我们为这两个元素都添加了一个click事件，并且都是在事件捕获阶段处理。
![]()
那么，当我们点击内层的
时，会发生什么呢？
根据事件捕获的原理，事件会从外层的
开始向内传递，因此首先会执行外层的事件处理函数，即console.log("outer clicked")。接着，事件会传递到内层的
，执行内层的事件处理函数，即console.log("inner clicked")。
如果我们将事件处理函数的第三个参数（useCapture）设置为false，即在事件冒泡阶段处理，那么当我们点击内层的
时，会先执行内层的事件处理函数，即console.log("inner clicked")，接着执行外层的事件处理函数，即console.log("outer clicked")。
因此，我们可以根据需要选择事件捕获或事件冒泡模式来处理事件。
2023-05-10 16:56:47 更新
其他工具
0.025052s