js 事件流的三个阶段

ordinary90

于 2024-06-01 09:56:33 发布

阅读量323

点赞数 8

分类专栏：前端全栈开发文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zxcv321zxcv/article/details/139368568

版权

前端全栈开发专栏收录该内容

152 篇文章 0 订阅

订阅专栏

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

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

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

<!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

ordinary90

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js 事件流的三个阶段

JavaScript事件流分为三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。在事件处理过程中，事件会在文档树中从根节点向目标节点传播，然后再从目标节点向根节点传播。事件捕获阶段(Event Capturing Phase)：事件首先从根节点开始，沿着DOM树向目标节点传播。在此过程中，事件会经过每个节点，直到达到目标节点。事件冒泡阶段(Event Bubbling Phase)：事件从目标节点开始反向传播，沿着DOM树向根节点传播。目标阶段(Event Target Phase)：事件已经达到目标节点。
复制链接

扫一扫