当前位置: 首页 > 帮助中心

JavaScript中事件传播分为

时间:2026-01-31 15:59:49

JavaScript中的事件传播分为三种:冒泡传播、捕获传播和目标传播。这三种传播方式决定了事件对应的触发顺序,同时也是我们进行事件冒泡和阻止冒泡的重要依据。

冒泡传播是最常见的事件传播方式,即从事件触发的元素开始,依次向父级元素冒泡传递,直至到达根节点。比如有一个嵌套在一个div中的button元素,点击button后,事件会先在button元素上触发,然后依次在div元素、body元素、html元素上触发,直至最后到达根节点window对象。

<div onclick="console.log('div')">     <button onclick="console.log('button')">点击</button></div>

捕获传播是冒泡传播的逆序,即从根节点开始,沿着事件触发元素的祖先元素逐级向下传递,直至到达事件触发元素。比如有一个在body元素上注册的click事件,在点击button元素时,会先在html元素、body元素上触发,最后才到达button元素。

document.body.addEventListener('click', function(event) {console.log('body');}, true);

目标传播是指事件首先在目标元素上触发,然后再按照冒泡或捕获的方式传播。比如在button元素上注册一个click事件,点击该按钮时,会先在该元素上触发click事件,然后再根据父元素的注册情况,决定继续冒泡还是捕获。

document.querySelector('button').addEventListener('click', function(event) {console.log('button');event.stopPropagation();  // 阻止事件冒泡}, false);

事件传播是DOM事件机制的重要组成部分,不同的传播方式可以满足不同的需求。比如在处理事件冒泡的过程中,可以避免使用很多重复的代码,同时也可以根据传播的顺序做出不同的响应;而使用捕获传播则可以更加精确地捕获事件,避免触发不必要的事件。


上一篇:javascript中丨丨符号
下一篇:javascript中函数参数传递
  • 英特尔与 Vertiv 合作开发液冷 AI 处理器
  • 英特尔第五代 Xeon CPU 来了:详细信息和行业反应
  • 由于云计算放缓引发扩张担忧,甲骨文股价暴跌
  • Web开发状况报告详细介绍可组合架构的优点
  • 如何使用 PowerShell 的 Get-Date Cmdlet 创建时间戳
  • 美光在数据中心需求增长后给出了强有力的预测
  • 2027服务器市场价值将接近1960亿美元
  • 生成式人工智能的下一步是什么?
  • 分享在外部存储上安装Ubuntu的5种方法技巧
  • 全球数据中心发展的关键考虑因素
  • 英特尔与 Vertiv 合作开发液冷 AI 处理器

    英特尔第五代 Xeon CPU 来了:详细信息和行业反应

    由于云计算放缓引发扩张担忧,甲骨文股价暴跌

    Web开发状况报告详细介绍可组合架构的优点

    如何使用 PowerShell 的 Get-Date Cmdlet 创建时间戳

    美光在数据中心需求增长后给出了强有力的预测

    2027服务器市场价值将接近1960亿美元

    生成式人工智能的下一步是什么?

    分享在外部存储上安装Ubuntu的5种方法技巧

    全球数据中心发展的关键考虑因素