js 事件流的三个阶段

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

  1. 事件捕获阶段(Event Capturing Phase):事件首先从根节点开始,沿着DOM树向目标节点传播。在此过程中,事件会经过每个节点,直到达到目标节点。

  2. 目标阶段(Event Target Phase):事件已经达到目标节点。

  3. 事件冒泡阶段(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
相关推荐
WJ.Polar4 分钟前
Python数据容器-list和tuple
开发语言·python
幼儿园技术家5 分钟前
Uniapp简易使用canvas绘制分享海报
前端
FrostedLotus·霜莲18 分钟前
C++主流编辑器特点比较
开发语言·c++·编辑器
超级码.里奥.农20 分钟前
零基础 “入坑” Java--- 七、数组(二)
java·开发语言
KENYCHEN奉孝29 分钟前
Rust征服字节跳动:高并发服务器实战
服务器·开发语言·rust
挺菜的37 分钟前
【算法刷题记录(简单题)002】字符串字符匹配(java代码实现)
java·开发语言·算法
开开心心就好1 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝1 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele1 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮2 小时前
【无标题】
开发语言·前端·javascript