DOM标准事件的三个阶段

最新推荐文章于 2023-09-05 09:26:32 发布

理个以哈呦

最新推荐文章于 2023-09-05 09:26:32 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/qq_15253407/article/details/50662963

html 专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨了DOM事件流的三个关键阶段：捕获阶段、目标阶段和冒泡阶段。从文档的根节点开始流向目标对象的事件路径分为这三个部分，了解它们对于开发者构建响应式网页至关重要。

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

/*事件一开始从文档的根节点流向目标对象（捕获阶段），然后在目标对向上被触发（目标阶段），之后再回溯到文档的根节点（冒泡阶段）。*/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

理个以哈呦

关注关注

1
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【前端知识点】事件流，事件委托，事件截断详解

代码的魅力，根本走不出来

04-11

271

当用户点击某个列表项时，该事件就会冒泡到父元素，我们只需要判断事件源的类型是否为列表项，然后执行对应的操作即可。在事件委托中，不是在每个子元素上单独添加事件监听器，而是将事件监听器添加到它们的父元素上，利用事件冒泡的机制，通过判断事件源的类型，执行对应的操作。在上面的代码中，当单击按钮时，事件会首先在文档对象上触发，然后在 body 元素上触发。需要注意的是，如果父元素上有多个事件监听器，那么每个监听器都会执行，因此要注意阻止事件冒泡或停止事件传播，以免引起意外结果。方法来阻止事件继续冒泡到父元素。

DOM事件相关总结

前端程序猿的博客

01-21

769

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

DOM事件的三个阶段

liu-JQ

08-30

1630

1. 捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。 1.1 那么捕获阶段的作用是什么呢？捕获阶段的主要任务是建立传播路经，在冒泡阶段根据这个路经回溯到文档根节点 2. 目标阶段事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发 3. 冒泡阶段事件在目标节点上触发后，不会终止...

dom事件的三个阶段

fan_ge_的博客

04-20

501

DOM事件的三个阶段事件发生后，会在DOM树上传播，DOM事件流分为三阶段：捕获，目标，冒泡如下图：事件的发生：三个阶段捕获：由外向内，记录各级元素上绑定的相同事件 IE8中无此阶段目标触发：首先触发目标元素上的事件处理函数冒泡：按照捕获顺序的反向，有内到外，依次触发各级父元素绑定的事件处理函数在事件处理中目标阶段被看做冒泡阶段的一部分如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。 EventTarget.addEvent

事件触发三个阶段&事件委托

weixin_43297321的博客

07-14

1651

比如说当我们给元素设置点击事件，点击时，由外到里会经历捕获阶段、目标阶段、冒泡阶段，相应的，会触发路径元素上的事件。捕获阶段概念：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。目标阶段概念: 事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发。冒泡阶段概念: 事件在目标节点上触发后，不会终止，一层层向上冒，回溯到根节点。 segmentfault：浏览器事件机制中事件触发的三个阶段我着重提一下 HTML DOM 的 ad

js DOM的事件常见操作实例详解

10-15

在JavaScript中，DOM事件处理涉及三个关键要素：事件源、事件和事件处理程序。 1. 事件源（Event Target）：事件源是指触发事件的HTML元素，例如用户点击的按钮或者鼠标悬停的图像。在JavaScript中，可以通过`...

JavaScript Dom 绑定事件操作实例详解

10-16

第三个参数表示事件冒泡模型（`false`）或捕获模型（`true`）。默认情况下，事件会从最深的节点开始冒泡到父节点，如果设置为`true`，则会在捕获阶段触发事件处理函数。 4. **事件冒泡与事件捕获** - **事件冒泡*...

event-dom:DOM事件

05-04

DOM事件模型由三个级别组成：DOM0级事件、DOM2级事件和DOM3级事件。DOM0级是最基础的，通过直接在元素上设置`addEventListener`和`removeEventListener`方法来添加和移除事件监听器。DOM2级引入了事件目标、事件流...

DOM 事件的深入浅出（一）

09-01

需要注意的是，`addEventListener`的第三个参数是可选的，表示事件是在捕获阶段还是在冒泡阶段触发。 - **DOM3级事件处理**：进一步扩展了DOM2级事件模块，添加了更多的事件类型，如键盘事件、UI事件、鼠标事件、...

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

09-03

DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们，下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序

JS 事件触发后的三个阶段

qq_46275230的博客

04-24

824

JS 事件触发后的三个阶段文章目录JS 事件触发后的三个阶段1.事件捕获阶段2.目标阶段3.事件冒泡阶段过程图形说明 1.事件捕获阶段事件由最不精确的目标对象(document)开始触发，一直触发到具体精确的目标元素对象（element）的过程 2.目标阶段目标阶段的事件会触发该元素（即事件目标）上的所有监听器 3.事件冒泡阶段事件由精确，特定的目标元素对象（element）开始触发,一致触发到最不精确的目标对象（docuemnt）的过程过程图形说明 ...

DOM对象的层次

iteye_5722的博客

03-02

554

一介绍文档对象模型采用的分层结构为树形结构，以树节点的方式表示文档中的各种内容。先以一个简单的HTML文档说明一下。二代码 <html > <head> <title>标题内容</title> </head> <body> <h3>三号标题</h3>

dom3级事件

weixin_30338461的博客

05-29

512

自定义事件的触发 1. 对于标准浏览器，其提供了可供元素触发的方法：element.dispatchEvent(). 不过，在使用该方法之前，我们还需要做其他两件事，及创建和初始化。因此，总结说来就是： document.createEvent() event.initEvent() element.dispatchEvent() 举个板栗： $(dom).addEvent...

JavaScript中的事件传播(DOM2标准事件模型)

weixin_33754065的博客

03-20

241

在所有的现代浏览器当中——除了IE9之前的版本——都实现了DOM2标准事件模型，这个事件模型规定:每一个DOM元素所触发的事件都要经历三个阶段：一、捕获阶段；二、目标对象本身的事件处理程序调用阶段；三、冒泡阶段。冒泡阶段：当文档元素上发生某个类型的事件时，他们会在文档树上向上传播。（即调用父元素的相同类型的事件处理函数）捕获阶段：捕获阶段像反向...

dom对象的层次关系

老农写代码

01-24

1100

DOM对象的层次关系Window Location Frames History Navigator Event Screen Document Links Anchors Images Filters

【DOM】DOM事件全解析，万字总结，看这一篇文章就够了_07

青春木鱼的博客

05-29

1569

事件是DOM中最重要的知识，可以这么说，我们之前讲的DOM的增删改查操作，一旦到了学了框架或者将来到了公司当中，可能就不用了，但我们不可以不学，因为我们学DOM是为了学框架打基础，学DOM有助于你对框架的理解，对一些API和实现原理的理解。另外，毕竟框架也不是万能的，我们谁也确定不了一个流行框架能活跃多长时间，所以，不管以后框架怎么变，但基础的还是基础，就像学习了自动挡开车之后，万一有一天只有手动挡的车，你该怎么办呢？

DOM规范

qq_64395787的博客

06-13

390

DOM的基础

DOM 简介 | 深入了解DOM