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
相关推荐
Hilaku3 分钟前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode9 分钟前
iOS 苹果内购 Storekit 2
前端
LuckySusu9 分钟前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu10 分钟前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu14 分钟前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu14 分钟前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu18 分钟前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在20 分钟前
6个值得收藏的.NET ORM 框架
前端·后端·.net
LuckySusu25 分钟前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript
文心快码BaiduComate29 分钟前
文心快码入选2025服贸会“数智影响力”先锋案例
前端·后端·程序员