DOM 事件有哪些阶段？事件代理的理解

最新推荐文章于 2022-09-19 02:10:05 发布

一只奶味蓝

最新推荐文章于 2022-09-19 02:10:05 发布

阅读量759

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46197033/article/details/104804380

版权

分为三大阶段：捕获阶段--目标阶段--冒泡阶段

	事件代理简单说就是：事件不直接绑定到某元素上，而是绑定到该元素的父元素上，进行触发事件操作时，
	再通过条件判断，执行事件触发后的语句(例如'alert(e.target.innerHTML)')

	好处：(1)使代码更简洁；(2)节省内存开销

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一只奶味蓝

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

DOM--事件代理（事件委托）

qq_56607109的博客

09-02

261

有： click , mousedown , mouseup , keydown , keyup , keypress。

DOM以及事件

weixin_42197893的博客

03-02

180

DOM: 1、Node类型: 1.1节点类型：nodeType 12种，常见的是元素节点Node.ELEMENT_NODE(1)和文本节点TEXT_NODE(3) 1.2节点关系：访问子节点：（1）node.childNodes:保存着一个NodeList对象,可以用node.childNodes[0]或者node.childNodes.item(0)来访问子节点（2）node.firs...

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

javaScript 前端面试题 30天学习计划 ----DOM 事件有哪些阶段？谈谈对事件代理的理解（第七天）

qq_32616119的博客

08-18

192

javaScript 前端面试题 30天学习计划 ----（第七天）日常任务前端面试题练习学习习题所提知识点（概念、内容、用法）掌握习题答案用自己的理解解答习题复习前一天所学知识代码操作掌握习题答案记忆知识点（概念、内容、用法） DOM 事件有哪些阶段？谈谈对事件代理的理解？ ...

DOM事件全面总结

weixin_33726318的博客

02-22

101

事件的定义：事件就是用户或浏览器自身执行的某种动作。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比如说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。事件类型 UI事件焦点事件，当元素获得或失去焦点时触发鼠标事件，滚轮事件，使用鼠标滚轮时触...

理解DOM事件流的三个阶段

weixin_30555515的博客

04-16

289

流的概念，在现今的JavaScript中随处可见。比如说React中的单向数据流，Node中的流，又或是今天本文所讲的DOM事件流，都是流的一种生动体现。用术语说流是对输入输出设备的抽象。以程序的角度说，流是具有方向的数据。事件流所描述的就是从页面中接受事件的顺序。事件流也有两种，分别是事件冒泡和事件捕获。在所有的现代浏览器当中——除了IE9之前的版本——都实现了DOM2标准事件模型，即事件...

DOM中事件的三个阶段

wurourouzhang的博客

01-20

2167

DOM中事件有三个阶段，分别为   1.事件冒泡阶段：当嵌套的元素注册相同的事件时，里面得元素触发了事件，外面的元素的事件也触发了。即执行顺序是从内向外。   2.事件处于目标阶段   3.事件捕获阶段：当嵌套的元素注册相同的事件时，里面得元素触发了事件，外面的元素的事件也触发了。但执行顺序是从外向内。   其中：事件...

DOM事件流

Sunny ic

05-05

401

每天一个前端面试题之 DOM事件流一、DOM事件流是什么？首先明确一点，javascript和HTML的交互式通过事件完成。事件就是文档或浏览器窗口发生的一些特定的交互瞬间，事件流描述的是事件接收传播的过程、二、DOM事件流的三个阶段 1.事件捕获阶段事件捕获的思想是不太具体的DOM节点先先接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于：事件到达预定的节点之前就捕获它。 2.当前目标阶段正正的目标节点正在处理事件的阶段。 3.事件冒泡事件冒泡的思想是由最具体的元素(嵌套层次最深

DOM 事件和 React 事件的区别，如何正确的阻止冒泡

MayanDev

10-22

390

DOM 事件和 React 事件的区别，如何正确的阻止冒泡 DOM 的事件一般会先后经历捕获与冒泡两个阶段，捕获事件是沿着 DOM 树由上往下传递，到达触发事件的元素（target）后，事件开始冒泡，沿着 DOM 树继续向上传递。 IE 9 之前的只支持冒泡以这段代码为例： <div class="outer"> <div class="inner"> inner </div> </div> 如果点击了 inner，事件是如何传递的呢？

深入理解DOM事件冒泡和捕获

# 1. 介绍：什么是DOM事件冒泡和捕获 ## 1.1 简述DOM事件的基本概念和应用场景在Web开发中，DOM（Document Object ...DOM事件流包括三个阶段：捕获阶段、目标阶段和冒泡阶段。 - 捕获阶段：事件自顶向下从window对象

DOM事件机制

sanmi8276的博客

07-20

264

一、简介事件流是一个事件沿着特定数据结构传播的过程。冒泡和捕获是事件流在DOM中两种不同的传播方法事件流有三个阶段事件捕获阶段处于目标阶段事件冒泡阶段事件捕获事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件事件冒泡事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行

javascript事件模型代码

12-08

通过理解事件处理模式、事件代理和用户事件接口，开发者可以更高效地编写出交互性强、性能优秀的JavaScript代码。在实际编程中，要充分利用JavaScript的面向对象特性和闭包功能，以创建可维护、可扩展的事件处理系统...

Javascript高级程序设计--事件笔记

Dean的博客

08-10

505

事件流描述的是从页面中接收事件的顺序。 IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。1.事件冒泡即事件开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较不具体的节点(文档),从下面页面为例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

DOM事件流的三个阶段

qq_39045065的博客

09-19

4520

事件流之事件冒泡与事件捕获在浏览器发展的过程中，开发团队遇到了一个问题。那就是页面中的哪一部分拥有特定的事件？可以想象画在一张纸上的一组同心圆，如果你把手指放在圆心上，那么你的手指指向的其实不是一个圆，而是纸上所有的圆。放到实际页面中就是，你点击一个按钮，事实上你还同时点击了按钮所有的父元素。开发团队的问题就在于，当点击按钮时，是按钮最外层的父元素先收到事件并执行，还是具体元素先收到事件并执...

DOM-事件代理

最新发布

qq_64067728的博客

09-19

114

无论事件触发时是不是目标对象的监听器在监听器内部的事件对象event中都可以访问这个事件的目标对象，利用这个特点去绑定事件给父级元素来代理子级元素的业务。这种设计就是事件代理。事件代理：网页设计中一种设计思想利用事件对象中引用的目标对象这个技术来实现的。

DOM —— 事件代理

z_2532040197的博客

07-22

359

事件代理又叫事件委托，是在网页设计中的一种设计思想，即把一个或者一组元素（目标元素）的事件绑定到父级或者祖先级元素上。真正绑定事件的是外层元素，⽽不是⽬标元素。当事件响应到目标元素上时，会通过事件冒泡机制从⽽触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。事件代理主要是用来解决静态的事件绑定问题；解决业务相同，而性能消耗却更高的问题。...

什么是事件代理？DOM2.0标准事件模型的三个阶段

weixin_30919429的博客

10-31

165

体验更优排版请移步原文：http://blog.kwin.wang/programming/js-event-delegation.html 事件代理，又称事件委托（Delegation），就是将处理事件委派到父元素或者顶级元素上，利用事件的冒泡机制，管理某一类型元素上的所有事件。要理解这个概念，必须先对事件模型有个初步的了解。W3C定义的DOM2.0标准事件模型分为三个阶段： ...

dom事件

qq_29738977的博客

12-17

224

一、dom事件级别 dom0: ele.onclick=function(){} dom1: 指定时没有涉及事件相关的内容 dom2: ele.addEventListener(&amp;quot;click&amp;quot;,function(){},false) 后一个参数指定是冒泡还是捕获。 dom3：ele.addEventListener(&amp;quot;keyup&amp;quot;,function(){},false) 增

JS的DOM操作——事件类型

m0_59345890的博客

07-18

1002

2、ondblclick鼠标双击事件触发条件鼠标第一次按下和第二次松开时鼠标指针在被选元素区域内部并且时间间隔不能太长。10、onwheel鼠标滚轴滚动事件触发条件鼠标滚轴滚动时鼠标指针在被选元素内部。1、onclick鼠标点击事件触发条件鼠标按下和松开时，鼠标指针在被选元素区域内部。3、onmousedown鼠标按下事件触发条件鼠标在被选元素内按下。4、onmouseup鼠标松开事件触发条件鼠标在被选元素内松开。...

深入理解JavaScript事件模型与代码示例

在这个过程中，调用者是事件源，而响应行为则是通过事件处理器或事件代理实现的。例如，`dispatchEvent`函数扮演了事件调度者的角色，它检查对象是否有指定类型的事件处理器（如`"on"+eventType`），如果没有立即...