浅谈javascript事件冒泡机制

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 51 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/startmyways/archive/2012/11/28/2792216.html

文章标签：

#javascript #ViewUI

本文详细介绍了事件冒泡和事件捕获两种不同的事件传播机制。分别从W3C标准和IE浏览器的角度进行对比说明，包括它们的不同阶段和处理顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　平时用到事件冒泡的例子很多，但是总是懒得整理，为了自己不会边了解边忘记，决定还是记录下来。首先还是把自己了解的说一下吧，说的不对，还请大家多多帮忙纠正。

主要还是分两类：ＩＥ和w3c标准

先说w3c标准分为3个阶段：事件捕获阶段-事件目标处理-冒泡阶段顺序为 window-document-html-body-div-事件目标处理-div-body-html-document-window

ＩＥ只有冒泡，没有事件捕获，它的顺序是相反的，window-document-html-body-div-目标事件处理

转载于:https://www.cnblogs.com/startmyways/archive/2012/11/28/2792216.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34319111

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

由onmouseover、onmouseenter浅谈事件冒泡机制

weixin_38680881的博客

06-21

291

如上图所示，最近的项目在导航栏处要实现上面的效果，鼠标移开大红框时子导航栏要消失，最开始鼠标移开事件我用的是onmouseover来绑定hideTrade方法，但出现了一个问题，鼠标移出小红框时也会触发hideTrade，改为onmouseleave之后就没有这个问题了，查了一下原来这两个方法最大的不同在于onmouseleave方法会触发事件冒泡。 <transition name="fade"> <div class="sonBar" v-show="isTrade" @mou..

浅谈js的事件机制，事件冒泡、事件捕获、事件代理(事件委托)

ajaxsync

01-25

1362

当你点击粉色的时候，首先会触发蓝色，然后再触发粉色（虽然绑定了两个事件，但是由于使用了event.stopImmediatePropagation()方法，所以就不会触发粉色盒子的其他事件了）。至于绿色不触发，是由于为粉色添加了阻止事件传播，所以不会向外层继续传播事件，也就是说绿色的是不会触发的。当你点击粉色的时候，首先会触发蓝色，然后再触发粉色（绑定了两个事件，就会打印两条数据）。至于绿色不触发，是由于为粉色添加了阻止事件传播，所以不会向外层继续传播事件，也就是说绿色的是不会触发的。

参与评论您还未登录，请先登录后发表或查看评论

javascript事件冒泡机制探讨

weixin_33890499的博客

09-14

116

今天学了一个事件冒泡机制，觉得有点问题，就自己测试了一下，和大家分享下结果，有助于帮助大家更好的去理解事件冒泡机制。举个例子： <html><head><script>function f1(){alert('f1');}function f2(){alert('f2');}function f3(){alert('f3');}&...

浅谈JavaScript事件机制与事件委托

Leon的博客

03-28

233

一、事件流（捕获，冒泡）事件流：指从页面中接收事件的顺序，有冒泡流和捕获流。当页面中发生某种事件（比如鼠标点击，鼠标滑过等）时，毫无疑问子元素和父元素都会接收到该事件，可具体顺序是怎样的呢？冒泡和捕获则描述了两种不同的顺序。 DOM2级事件规定事件流包括三个阶段，如图：事件捕获阶段、处于目标阶段、事件冒泡阶段。如果我们点击一个div盒子，实际上是先点击的document，然后点击...

浅谈事件冒泡前世今生

weixin_38225763的博客

10-27

204

所谓的时间冒泡就是当一个元素触发一个事件，事件会像是水泡一样，从触发元素向它的所有父节点传播，一直到根节点都会接收到此事件，如果父元素中注册了相应的事件处理函数，那么尽管事件在子节点触发的，在父元素上注册的事件处理函数同样会被触发比如这次是为了实现点击相应行政区区域图，弹出窗口显示相应的查询数据，结果再给行政区域绑定监听点击事件时，触发了两次，因为行政区域图是在map地图里的一块区域，这就引发了事件冒泡，从外层向里层(行政区域图)，依次触发点击事件了

浅谈JavaScript的事件机制

wusuopuBUPT的专栏

03-21

6733

JavaScript 的事件是以一种流的形式存在的，一个事件会有多个元素同时响应。具体分为：捕获型事件（非IE）、冒泡型事件（所有浏览器都支持）。捕获型事件是自上而下的，而冒泡型事件是自下而上的。下面这张图说的很明了： 1.捕获型事件： #div1 #div2 var a = document.getElementById('div1')

javascript事件冒泡、事件捕获、事件委托

qq_26389819的博客

10-22

749

浅谈事件冒泡、事件捕获和事件委托DOM事件流事件冒泡事件捕获事件委托补充阻止事件冒泡 DOM事件流对于学习过javascript的人而言，DOM对象必然再熟悉不过，我们常谈的DOM(文档对象模型)的结构是一个由许多的元素节点构成的树形结构。当一个HTML元素产生了一个事件后，该事件会在当前元素节点与根节点之间的路径上传播，事件所经过的路径都会收到该事件，这个传播过程就是我们所谓的DOM事件流。...

浅谈js冒泡事件2

Wang1996332的博客

11-19

js冒泡阻止 1.事件目标现在，事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现。...

浅谈js中的事件循环和事件处理机制

2301_76607771的博客

10-16

1135

当执行栈为空时，事件循环会首先检查微任务队列。如果有微任务，它会依次执行微任务队列中的所有任务，直到微任务队列为空。然后，事件循环会检查宏任务队列，并取出队列中的第一个宏任务执行。这个宏任务执行时，可能会产生新的微任务或宏任务，这些任务会被相应地添加到各自的任务队列中。重复上述过程，形成事件循环。JavaScript中的事件处理机制包括事件捕获、事件冒泡和事件委托三个部分。事件捕获允许在事件到达目标元素之前进行处理，而事件冒泡则使得可以在更高级别的元素上捕获事件。

浅谈javascript事件取消和阻止冒泡

10-24

`return false`在JavaScript中通常用于阻止事件的默认行为，但在jQuery中，它还会防止事件冒泡。接下来，我们讨论阻止冒泡。事件冒泡是指事件从最深的节点开始向上层节点传播的过程。有时候我们可能希望阻止事件...

浅谈javascript中的事件冒泡和事件捕获

10-20

JavaScript中的事件处理是Web开发中的核心概念，它涉及到用户与网页交互时的响应机制。本文主要探讨了两个关键的事件处理机制：事件冒泡和事件捕获。 1. 事件冒泡（Event Bubbling）事件冒泡是JavaScript中最早被...

浅谈 javascript 事件处理

10-24

JavaScript事件处理机制是前端开发中的一项核心技术，它允许网页响应用户的交互行为。一个完整的事件处理流程包括三个部分：事件源（Event Target）、事件（Event）和事件处理程序（Event Handler）。事件源指的是...

浅谈Javascript事件对象

10-20

这对于理解事件冒泡和事件捕获的机制非常有帮助，而且在处理类似于点击事件时，可以直接获取到被点击元素的具体内容。例如，通过访问event.target.innerHTML，我们可以获取到点击元素的HTML内容，这对于创建动态交互...

浅谈JavaScript的事件

12-07

JavaScript的事件机制是Web开发中不可或缺的一部分，它允许开发者对用户与网页的交互进行响应。在本文中，我们将深入探讨事件流、事件冒泡以及如何阻止事件冒泡和取消默认事件。 1. **事件流** 事件流描述了事件在...

css的white-space: pre

qq_51035159的博客

08-22

349

简单来说，这个组件的核心就是让用户能够粘贴任何文本内容（特别是配置文件、JSON等），并且保证粘贴的内容格式完全不变，然后可以原样发送给后端处理。- white-space: pre ：这是最关键的CSS属性，确保所有空格、制表符、换行符都被保留。- 用户粘贴的内容会完整存储在 inputJson.value 中，包括所有格式字符。- 使用Vue3的 v-model="inputJson" 实现双向数据绑定。- wrap="off" ：防止浏览器自动换行，保持原始的行结构。- 聚焦时的视觉反馈。

react样式问题

qq_44136028的博客

08-22

280

React组件样式控制主要有三种方式：1）内联样式，通过style属性传递JavaScript对象，支持动态样式但需驼峰命名；2）CSS类名，使用className绑定静态样式；3）CSS-in-JS（如styled-components），将CSS嵌入JS生成带样式组件，支持动态主题切换。三种方式各具特点，内联样式适合简单动态样式，CSS类名适合静态样式，CSS-in-JS适合复杂组件化样式需求。

Figma MCP 的作用与使用方法