浏览器的三阶段 捕获、目标、冒泡

最新推荐文章于 2023-04-14 23:38:52 发布
原创 最新推荐文章于 2023-04-14 23:38:52 发布 · 256 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨事件机制的细节，包括冒泡、捕获和传播等机制，重点讲解了W3C定义的事件发生三阶段：捕获阶段、目标阶段和冒泡阶段。忽略基础知识，着重于原理理解。

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

如果对事件大概了解，可能知道有事件冒泡这回事，但是冒泡、捕获、传播这些机制可能还没有深入的研究实践一下，我抽时间整理了一下相关的知识。

  • 本文主要对事件机制一些细节进行讨论，过于基础的事件绑定知识方法没有介绍。
  • 特别少的篇幅关注浏览器兼容问题，毕竟原理了解了，兼容性问题可以自己想办法解决了。

在浏览器相对标准化之前，各个浏览器厂商都是自己实现的事件模型，有的用了冒泡，有的用了捕获，W3C为了兼顾之前的标准，将事件发生定义成如下三个阶段

1、捕获阶段
2、目标阶段
3、冒泡阶段

 

 

 

 

 

凯果
关注
js事件机制----捕获与冒泡机制实例分析
10-15
**addEventListener()** 方法是JavaScript中用于绑定事件处理函数的主要方式，它接受三个参数：事件名称、处理函数和一个布尔值，用于指定事件是在捕获阶段还是冒泡阶段执行。例如： ```javascript element....
js基础之事件捕获与冒泡原理
10-16
在前端开发中，JavaScript 的...幸运的是，W3C 提出了统一的标准，即 DOM 事件流，它定义了事件从触发到处理的三个阶段：捕获阶段、目标阶段和冒泡阶段。如今，现代浏览器都遵循这一标准，这为开发者带来了很大的便利。
理解捕获,目标,冒泡三个阶段
weixin_34194702的博客
10-05 183
1.事件的三个阶段 捕获 目标 冒泡 捕获(IE8及以下版本不支持)，目标，冒泡 捕获阶段给事件截获提供了可行性。   2.冒泡阶段触发事件 <body style="height:500px"> <div id="all"> <div>div1</div> <div>div
事件的捕获 目标 冒泡
陈迹·清欢的博客
03-24 231
addEventListener(type,callback,true/false); 事件监听的添加函数具有三个参数，第三个不填默认为false，type指定事件类型，callback是回调函数，true/false为true时代表捕获时触发，false代表冒泡时触发。 就比如一个以下结构的html <div class="div1"> <div class="div2...
浏览器事件机制中事件触发三个阶段？
weixin_34041003的博客
08-14 4042
js中时间执行的整个过程称之为事件流，分为三个阶段：事件捕获阶段，事件目标处理函数、事件冒泡。 当某歌元素触发某个事件（如：click），顶级对象document发出一个事件流，顺着dom的树节点向触发它的目标节点流去，直到达到目标元素，这个层层递进，向下找目标的过程为事件的捕获阶段，此过程与事件相应的函数是...
DOM事件流的三个阶段，捕获，目标，冒泡
hq的博客
10-30 2751
事件对象随事件流在DOM树上传播，DOM事件流分为三阶段：捕获，目标，冒泡 1、捕获阶段 事件传播由目标节点的祖先节点逐级传播到目标节点。先由文档的根节点document开始触发对象，最后传播到目标节点，从外向内捕获事件对象； 2、目标阶段 事件到达目标对象，事件触发，如果事件不允许冒泡，事件会在这一阶段停止传播。 3、冒泡阶段 从目标节点逐级传播到document节点。 在事件处理中目标阶段被...
事件的传播：捕获/目标/冒泡
E_Wind802的博客
10-29 309
最近学习JavaScript事件，对于事件很多东西有点迷糊，综合了各位大佬的文档，来讲一下JS里面事件的相关操作。如果有错误的地方，欢迎大家指正。 事件 HTML 事件可以是浏览器行为，也可以是用户行为。以下是 HTML 事件的实例： HTML 页面完成加载 HTML input 字段改变时 HTML 按钮被点击 通常，当事件发生时，你可以做些事情。在事件触发时 JavaScript 可以执行一些代码。HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。 绑定事件 元
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
例如，在提供的代码示例中，当点击id3元素时，事件首先在捕获阶段执行obj2和obj3绑定的函数，然后在冒泡阶段执行obj1绑定的函数，因此显示顺序为id2、id3、id1。 `addEventListener`方法用于添加事件监听器，它接收...
JavaScript中捕获与冒泡详解及实例
10-20
在实际应用中，如果要使用事件捕获，可以通过`addEventListener`函数的第三个参数设置为`true`，来指定事件监听器处于捕获阶段。 下面是一个简单的事件捕获示例： ```javascript document.getElementById("first")...
详解浏览器事件捕获、冒泡
lyh0902的博客
02-22 1401
详解浏览器事件捕获、冒泡
详细介绍JS中的事件机制：捕获、目标、冒泡
qq_44621394的博客
03-03 2896
详细介绍JS中的事件机制：捕获、目标、冒泡
事件冒泡和事件捕获
weixin_33737134的博客
03-17 347
文／饥人谷_韩宝亿（简书作者）原文链接：http://www.jianshu.com/p/8311f782f70d著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。 1、事件阶段 如下图所示 Paste_Image.png 一般的，事件分为三个阶段：捕获阶段、目标阶段和冒泡阶段。 （1）捕获阶段（Capture Phase） 事件的第一个阶段是捕获阶段。...
事件传播的三个过程：捕获、冒泡、目标阶段
qq_42267036的博客
03-07 6172
一、事件流（捕获，冒泡） &nbsp; 事件流：指从页面中接收事件的顺序，有冒泡流和捕获流。 当页面中发生某种事件（比如鼠标点击，鼠标滑过等）时，毫无疑问子元素和父元素都会接收到该事件，可具体顺序是怎样的呢？冒泡和捕获则描述了两种不同的顺序。 事件传播的三个过程，事件捕获阶段、处于目标阶段、事件冒泡阶段。 事件捕获由远及近逐渐靠近事件目标，事件冒泡由事件目标逐渐向上冒泡 那是不是所有的事件都要经历...
浏览器事件模型捕获、冒泡
KID963931445的博客
04-12 350
浏览器中有两种事件模型，那就是捕获和冒泡。 当div发生嵌套时，点击其中一个div，所发生的事件并不会仅仅只针对被点击的div，他会触发自己父元素的事件。 如图所示，执行顺序从window向自己的为捕获阶段；反之为冒泡阶段。执行过程总是先执行捕获在执行冒泡。 例子如下。 <style> #parent{ width: 500px; height:500px; background: red; margin:auto;
JavaScript事件处理机制（捕获，目标，冒泡）
weixin_42661283的博客
07-09 700
事件处理机制的三个阶段（捕获阶段，目标阶段，冒泡阶段） 冒泡阶段：事件从内向外执行捕获阶段：事件从外向内执行； addEventListener(type,fn,useCapture) useCapture:事件处理机制（捕获阶段true，目标阶段，冒泡阶段false）默认为冒泡阶段 捕获阶段：事件从外向内执行; 冒泡阶段：事件从内向外执行 捕获情况： ...
捕获目标冒泡分析
weixin_44317998的博客
07-01 117
事件监听：addEventListener(name, func，boolean)第一个参数为事件名，如’click‘第二个参数为回调函数第三个参数是一个布尔类型，true则表明捕获时执行，false表示冒泡执行，不传默认为false执行顺序：捕获阶段——目标阶段——冒泡阶段案例分析： 执行结果是：222 444 000 333 111原因：btn0没有宽高，触摸不到btn0。所以根据阶段顺序btn2捕获--btn1捕获--btn1目标--btn1冒泡--btn2冒泡如果btn0有内容或者设置了宽高
浏览器事件：捕获过程和冒泡过程
qq_38526167的博客
04-14 484
捕获与冒泡，焦点，自定义事件
通俗易懂地理清js事件流中的捕获阶段，目标阶段和冒泡阶段的具体运行顺序
TNTNT_T的博客
03-27 1670
众所周知，事件流分为三个阶段冒泡分为捕获阶段，目标阶段和冒泡阶段， 这三个阶段到底是如何运行的呢？如果给同一个事件绑定上冒泡和捕获的事件到底会怎样触发呢？ ** 下面我用dom2级事件函数来变换捕获和冒泡，用eventPhase来判断事件的是捕获，还是目标阶段，还是捕获， document.addEventListener(事件,function ,trueorfalse); true代表捕获，...
浏览器快捷方式目标
abcdefg367的博客
10-16 987
设置mtc 浏览器快捷方式目标："D:\Program Files\360se\360se6\Application\360se.exe" -user-agent="Mozilla/5.0 (Windows NT 5.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36 QIHU 360SE "...
深入理解JavaScript事件冒泡与捕获机制
浏览器中的事件流分为两个阶段：事件捕获（Event Capture）和事件冒泡（Event Bubbling）。理解这两者的概念和行为对于设计复杂的交互逻辑和调试具有重要意义。 ### 事件冒泡 事件冒泡是指在DOM树中，一个事件不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值