什么是浏览器环境下的 Event Propagation（事件传
2024-02-21 本文已影响0人
_扫地僧_
在浏览器环境下，事件的传播（propagation）是指当一个特定的事件发生在DOM元素上时，它将按照特定的顺序在DOM树中传播，影响相关的DOM节点。这一传播过程分为三个阶段：捕获阶段（Capture Phase）、目标阶段（Target Phase）和冒泡阶段（Bubble Phase）。
-
捕获阶段（Capture Phase）：事件从根节点一直向下传播至触发事件的目标节点。在这个阶段，事件会经历DOM树的父节点链，直到达到触发事件的目标节点。
-
目标阶段（Target Phase）：事件已经到达了触发事件的目标节点。在这个阶段，事件在目标节点上被触发和处理。
-
冒泡阶段（Bubble Phase）：事件从目标节点开始，然后沿着DOM树向上传播，经过触发事件的目标节点的所有父节点。
在事件传播的每个阶段，都可以通过事件处理程序来捕获或处理事件。在实际应用中，开发者可以通过事件捕获和冒泡来实现一些高级的事件处理逻辑。
例子说明：
假设有如下HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Propagation Example</title>
</head>
<body>
<div id="outer">
<div id="middle">
<button id="inner">Click me!</button>
</div>
</div>
<script>
// 添加事件监听器
document.getElementById('outer').addEventListener('click', function() {
console.log("`Outer` Div Capturing Phase");
}, true); // 使用捕获阶段
document.getElementById('middle').addEventListener('click', function() {
console.log("`Middle` Div Capturing Phase");
}, true);
document.getElementById('inner').addEventListener('click', function() {
console.log("`Inner` Button Capturing Phase");
}, true);
document.getElementById('outer').addEventListener('click', function() {
console.log("`Outer` Div Bubbling Phase");
});
document.getElementById('middle').addEventListener('click', function() {
console.log("`Middle` Div Bubbling Phase");
});
document.getElementById('inner').addEventListener('click', function() {
console.log("`Inner` Button Bubbling Phase");
});
</script>
</body>
</html>
在这个例子中，点击按钮时，事件将首先在捕获阶段从外到内依次触发，然后在冒泡阶段从内到外触发。通过这个例子，可以清晰地看到事件是如何在DOM树中传播的。在实际开发中，利用这种事件传播机制，我们可以更灵活地控制和处理用户交互。
