js 事件流的三个阶段

ordinary902024-06-02 13:37

JavaScript事件流分为三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。在事件处理过程中，事件会在文档树中从根节点向目标节点传播，然后再从目标节点向根节点传播。

事件捕获阶段(Event Capturing Phase)：事件首先从根节点开始，沿着DOM树向目标节点传播。在此过程中，事件会经过每个节点，直到达到目标节点。
目标阶段(Event Target Phase)：事件已经达到目标节点。
事件冒泡阶段(Event Bubbling Phase)：事件从目标节点开始反向传播，沿着DOM树向根节点传播。

下面是事件流的代码示例：

html 复制代码

<!DOCTYPE html>
<html>
<body>

<div id="parent">
  <div id="child">
    Click Me
  </div>
</div>

<script>
// 事件捕获阶段
document.getElementById("parent").addEventListener("click", function() {
  console.log("parent capturing");
}, true);

document.getElementById("child").addEventListener("click", function() {
  console.log("child capturing");
}, true);

// 目标阶段
document.getElementById("parent").addEventListener("click", function() {
  console.log("parent target");
}, false);

document.getElementById("child").addEventListener("click", function() {
  console.log("child target");
}, false);

// 事件冒泡阶段
document.getElementById("parent").addEventListener("click", function() {
  console.log("parent bubbling");
}, false);

document.getElementById("child").addEventListener("click", function() {
  console.log("child bubbling");
}, false);
</script>

</body>
</html>

在以上示例中，当点击"Click Me"按钮时，控制台将会打印以下结果：

复制代码

parent capturing
child capturing
child target
parent target
parent bubbling