DOM事件三阶段

最新推荐文章于 2022-08-01 17:30:38 发布
最新推荐文章于 2022-08-01 17:30:38 发布
阅读量156 收藏
点赞数
分类专栏： javascript 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aceyaya/article/details/116644427
版权

DOM事件三个阶段

当一个DOM事件被触发时，它不仅仅只是单纯地在本身对象上触发一次，而是会经历三个不同的阶段：
在这里插入图片描述
1.捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；

2.目标阶段：到达目标事件位置（事发地），触发事件；

3.冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

在这里插入图片描述
引用来源：http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

aceyaya
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM 基础事件
amuist_ting的博客
09-15 200
onabort 图像的加载被中断。 onblur 元素失去焦点。 onchange 域的内容被改变。 onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onerror 在加载文档或图像时发生错误。 onfocus 元素获得焦点。 onkeydown 某个键盘按键被按下。 onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被
DOM（三）event事件
.
08-07 1886
交代一个例子<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件</title> <style type="text/css"> div {padding:40px;} #div1{background: red
DOM中事件的三个阶段
wurourouzhang的博客
01-20 2155
DOM中事件有三个阶段，分别为 &nbsp;&nbsp;1.事件冒泡阶段：当嵌套的元素注册相同的事件时，里面得元素触发了事件，外面的元素的事件也触发了。即执行顺序是从内向外。 &nbsp;&nbsp;2.事件处于目标阶段 &nbsp;&nbsp;3.事件捕获阶段：当嵌套的元素注册相同的事件时，里面得元素触发了事件，外面的元素的事件也触发了。但执行顺序是从外向内。 &nbsp;&nbsp;其中：事件...
Javascript高级程序设计--事件笔记
Dean的博客
08-10 481
事件流描述的是从页面中接收事件的顺序。 IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。1.事件冒泡即事件开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较不具体的节点(文档),从下面页面为例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
DOM0、DOM2、DOM3 事件
最新发布
csdssdn的博客
08-01 1437
鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。DOM级别一共可以分为4个级别DOM0级，DOM1级，DOM2级和DOM3级，而DOM事件分为3个级别DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。如下图所示以上代码我们通过直接在HTML代码里定义了一个onclick的属性触发showFn方法，这样的事件处理程序最大的缺点就是HTML于JS强耦合，我们一旦需要修改函数名就得修改两个地方。.........
理解DOM事件流的三个阶段
weixin_30555515的博客
04-16 283
流的概念，在现今的JavaScript中随处可见。比如说React中的单向数据流，Node中的流，又或是今天本文所讲的DOM事件流，都是流的一种生动体现。用术语说流是对输入输出设备的抽象。以程序的角度说，流是具有方向的数据。事件流所描述的就是从页面中接受事件的顺序。事件流也有两种，分别是事件冒泡和事件捕获。 在所有的现代浏览器当中——除了IE9之前的版本——都实现了DOM2标准事件模型，即事件...
JavaScript-185：dom事件三个阶段
臧小川的博客
02-16 193
dom 事件流 三个阶段 1 JS 代码中只能执行捕获或者冒泡其中的一个阶段 2 onclick 和 attachEvent(ie) 只能得到冒泡阶段 3 捕获阶段 如过addEventListener 第三个参数是true 那么则处于捕获阶段 document -> html -> body -> father 结构 <div class="father"> <div class="son"></div> &l..
深入理解JS DOM事件机制
10-21
- DOM2级事件规范定义了一个统一的事件流模型，包含三个阶段：事件捕获阶段、处于目标阶段和冒泡阶段。 - 在捕获阶段，事件从文档的根节点开始，经过每个层级，直到目标元素。 - 处于目标阶段，事件真正到达触发...
js DOM的事件常见操作实例详解
10-15
在JavaScript中，DOM事件处理涉及三个关键要素：事件源、事件和事件处理程序。 1. 事件源（Event Target）：事件源是指触发事件的HTML元素，例如用户点击的按钮或者鼠标悬停的图像。在JavaScript中，可以通过`...
JavaScript Dom 绑定事件操作实例详解
10-16
默认情况下，事件会从最深的节点开始冒泡到父节点，如果设置为`true`，则会在捕获阶段触发事件处理函数。 4. **事件冒泡与事件捕获** - **事件冒泡**：事件首先由最具体的元素（文档中嵌套层次最深的那个节点）...
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
09-03
DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们，下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
DOM事件流，冒泡 | 捕获 | 委托 ，详解
01-08
目录（一）DOM事件流① 定义② 图解③ 历史（二）冒泡（三）捕获（四）在不同的阶段执行事件（五）提高内存和性能 — 事件委托① 实例② 优点 （一）DOM事件流 ① 定义 DOM事件流包括三个阶段： 捕获阶段 目标阶段 ...
VUE DOM加载后执行自定义事件的方法
10-18
在Vue.js开发中，DOM加载后执行自定义事件是一个常见的需求，特别是在数据绑定和组件交互时。本篇文章将深入探讨如何在Vue实例中处理这个问题，特别是针对案例中遇到的图片轮播初始化问题。 首先，Vue.js 提供了一...
DOM中事件处理概览与原理的全面解析
09-01
`addEventListener`接受三个参数：事件类型、监听函数和一个布尔值，用于决定事件是在冒泡阶段还是捕获阶段触发。`removeEventListener`则用于移除监听函数，确保不会重复触发。 例如： ```javascript var div = ...
DOM 中的事件处理介绍
12-10
`addEventListener`接受三个参数：事件类型、处理函数和一个布尔值，表示是否在捕获阶段处理事件。在非IE浏览器中，事件监听器可以在捕获阶段或冒泡阶段触发，但在IE6、IE7、IE8中不支持捕获阶段。 对于不支持`...
dom事件的三个阶段
fan_ge_的博客
04-20 434
DOM事件的三个阶段 事件发生后，会在DOM树上传播，DOM事件流分为三阶段：捕获，目标，冒泡 如下图： 事件的发生：三个阶段 捕获：由外 向内，记录各级元素上绑定的相同事件 IE8中无此阶段 目标触发： 首先触发目标元素上的事件处理函数 冒泡：按照捕获顺序的反向，有内到外，依次触发各级父元素绑定的事件处理函数 在事件处理中目标阶段被看做冒泡阶段的一部分 如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。 EventTarget.addEvent
DOM事件的三个阶段
liu-JQ
08-30 1569
1. 捕获阶段：     事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。  1.1 那么捕获阶段的作用是什么呢？     捕获阶段的主要任务是建立传播路经，在冒泡阶段根据这个路经回溯到文档根节点 2. 目标阶段      事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发 3. 冒泡阶段     事件在目标节点上触发后，不会终止...
DOM0，DOM1，DOM2，DOM3级事件与event对象
HimBer的博客
09-06 2085
DOM事件级别 DOM 0 element.onclick = function(){} DOM 2 element.addEventListener(‘click’,function(){},false} DOM 3 element.addEventListener(‘keyup’,function(){},false}         因为DOM 1一般...
JavaScript DOM事件绑定详解
`addEventListener()`方法接收三个参数：事件名称、事件处理函数和一个布尔值，用于决定事件处理是在冒泡阶段还是捕获阶段执行。 4. **DOM事件类型**： JavaScript中有很多预定义的事件类型，如`click`、`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值