本文详细解析 JavaScript 中的事件冒泡与事件捕获机制。通过 addEventListener 的第三个参数控制触发顺序，默认冒泡由内向外，捕获由外向内。结合 jQuery 的 stopPropagation 方法，可阻止事件向祖先节点传播，掌握这些机制有助于精准控制 DOM 事件流。
JavaScript 事件冒泡与捕获机制详解
JavaScript 中事件冒泡和事件捕获机制的详解
这两种机制主要用于描述事件在 DOM 树中触发的时序问题。
事件捕获阶段，事件会从 document 节点开始，自上而下地一直传递到实际触发事件的目标节点，即由外到内依次触发。
事件冒泡阶段，事件则自下而上地由目标节点向上传递，即由内到外依次触发。
在绑定事件监听器时，可以使用第三个参数来控制事件触发的顺序是捕获还是冒泡。
当该参数设置为 true 时，采用事件捕获模式；设置为 false 时，采用事件冒泡模式。
通常情况下，该参数默认为 false，即默认采用事件冒泡方式。
在 jQuery 中，可以使用 e.stopPropagation() 方法来阻止事件冒泡，这意味着事件传播到当前 DOM 节点后，将不再触发其祖先节点上的事件。
以下是具体的尝试示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡与事件捕获</title>
<script>
window.onload = function () {
document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被触发，"+this.id);
},true)
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被触发，"+this.id)
},true)
}
</script>
</head>
<body>
<div id="parent">
parent事件
<div id="child" class="child">
child事件
</div>
</div>
</body>
</html>
在示例代码中，我添加了第三个参数 true，这表示使用事件捕获模式。
如果不添加该参数，则使用默认的事件冒泡模式，此时事件触发的时序是自内向外进行的。
以上就是对 JavaScript 中事件冒泡和事件捕获机制的详细解析，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！