什么是事件流？ 什么是事件冒泡？ 什么是事件捕获？

最新推荐文章于 2022-12-09 11:14:59 发布
最新推荐文章于 2022-12-09 11:14:59 发布
阅读量508 收藏
点赞数 1
分类专栏： JavaScript知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34639706/article/details/114978194
版权

好好学习，天天向上。ready？go！！！

事件流？

当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程叫作DOM事件流
元素触发事件时，事件的传播过程称为事件流，过程分为捕获和冒泡两种

冒泡事件？

微软提出的 事件由子元素传递到父元素的过程，叫做冒泡

捕获事件？

网景提出的 事件由父元素到子元素传递的过程，叫做事件捕获

零零历险记
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
事件冒泡与事件捕获
01-20
**事件流** 是事件传播的整个过程，包括事件捕获阶段、处于目标阶段（即事件实际发生的地方）和事件冒泡阶段。事件流描述了事件如何在DOM树中传递，提供了一种有序处理事件的方式。 总结来说，事件冒泡和事件捕获是...
js之事件冒泡和事件捕获详细介绍
01-19
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。  IE 5.5: div -> body -> document ...（2）捕获型事件(event ...（3）DOM事件流：同时支持两种事件模型：捕获型事件
什么是事件冒泡
v_jinfuwu的博客
03-14 9090
什么是事件冒泡 事件冒泡就是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件 事件冒泡的三个阶段 1、捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”，捕获阶段不会响应任何事件； 2、目标阶段：在目标节点上触发称为“目标阶段”； 3、冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”； 事件冒泡的原理 事件委托原理就是利用事件冒泡机制把里层所需要响应的事件绑定到外层 ...
JavaScript——事件捕获和事件冒泡
zg0601的博客
11-28 8809
JavaScript中事件捕获和事件冒泡的来由以及具体讲解，阻止事件捕获和冒泡（事件传播）的方法。
事件冒泡原理自我理解以及使用
L_YNAN的博客
06-24 1万+
首先，这是我自己在学习过程中对于时间冒泡原理的理解，如果有不对的地方，读者尽可提出，不断学习。 1.事件冒泡，就是元素自身的事件被触发后，如果父元素有相同的事件，如onclick事件，那么元素本身的触发状态就会传递，也就是冒到父元素，父元素的相同事件也会一级一级根据嵌套关系向外触发，直到document/window，冒泡过程结束。 2.比如： document.
什么是事件流？
热门推荐
qq_37049128的博客
07-30 2万+
一、事件流的定义 页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程为事件流 就我个人理解就是网页对点击事件的排序顺序就是事件流 二、事件流的分类 1、冒泡型的事件流（任何一款浏览器都支持） 从明确事件源到不明确的事件源依次向上响应。 2、捕获型的事件流（从IE8及以下版本支持） 从不确定事件源到确定事件源依次向下响应。
js事件流
weixin_50736511的博客
04-14 2762
什么是js事件流 事件流描述的是从页面中接受事件的顺序。 微软（IE）和网景（Netscape）开发团队提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。 后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。 事件流包含的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段 接下来就是介绍这两种事件流概念 事件冒泡流，
浅谈javascript中的事件冒泡和事件捕获
10-20
本文主要探讨了两个关键的事件处理机制：事件冒泡和事件捕获。 1. 事件冒泡（Event Bubbling） 事件冒泡是JavaScript中最早被广泛支持的事件流模式，由Internet Explorer引入。这一机制描述了事件如何从最具体的...
DOM事件流，冒泡 | 捕获 | 委托 ，详解
01-08
目录（一）DOM事件流① 定义② 图解③ 历史（二）冒泡（三）捕获（四）在不同的阶段执行事件（五）提高内存和性能 — 事件委托① 实例② 优点 （一）DOM事件流 ① 定义 DOM事件流包括三个阶段： 捕获阶段 目标阶段 ...
js冒泡、捕获事件及阻止冒泡方法详细总结
10-25
JavaScript 和 jQuery 中的事件处理机制包括事件冒泡和事件捕获两种模式，它们是DOM（文档对象模型）事件流的两种策略。理解这两种机制对于优化和控制页面上的交互至关重要。 事件冒泡是事件处理的经典模式，它从...
事件冒泡和事件捕获
Bliss_妍的博客
08-19 1181
1. 事件冒泡： 当一个元素被触发之后，会将事件一层一层由里向外一直传递到window对象。 2. 事件捕获：与事件冒泡相反，由外向里 3. DOM事件流：事件流包括三个阶段，事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的事件捕获，为截获事件提供了机会。然后是实际的目标接收了事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。 两种方式来阻止事件冒泡： 方式一：event.stopPropagation(); 方式二：return false; 但是这两种方式是有区别的。return fal
什么是事件冒泡与事件捕获，如何阻止事件冒泡
qq_36537108的博客
02-14 2279
什么是事件冒泡与事件捕获，如何阻止事件冒泡 事件冒泡 事件由具体的dom节点 接收，然后逐级向上传播到不具体的节点。是一种由内到外的传播
事件冒泡详解及阻止事件冒泡
我只是个很菜的前端
07-20 2604
事件冒泡 js 阻止事件冒泡
事件冒泡学个透
杜永康的博客
12-09 1168
事件冒泡，这一逻辑学名词对于很多初次学习js的程序员还是比较抽象，我想尝试用一种直观的方式，在这里将这个东西讲透。首先我们去查看了事件冒泡的百度解释：这一解释相对比较友好，但是难免还有些官方话。到底该怎么理解呢？我们往下看： 接下来再为此框架设置简单的样式，样式呈现： 然后我们点击每个颜色不一样的元素，得到以下结果： 程序员，这有什么规律，又说明什么？你发现了，事件是由内向外触发的。正如事件冒泡名字本身一样形象，泡泡都是从水里开始出现，向水面移动，直到溢出水面爆炸，冒泡结束。在编程语言里，
事件，事件流与事件冒泡
m0_60334479的博客
08-11 251
1.事件 事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。 事件是javaScript和DOM之间交互的桥梁。 你若触发，我便执行=调用它的处理函数执行相应的JavaScript代码给出响应。 2.事件流 指从页面中接收事件的顺序，有冒泡流和捕获流 事件流是事件执行的顺序，在IE下是事件冒泡，在非IE下是事件捕获 冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】 捕获型事件流：事件的传播是从最不
简单了解事件冒泡和阻止事件冒泡
D____ppx的博客
03-29 2676
1.什么叫事件冒泡？ 就是在触发事件时候 会一层一层向上冒泡(他同时会触发父类的事件) 2.阻止事件冒泡 意思就是阻止事件向上传递 第一种ie浏览器的阻止事件冒泡 利用了一种属性cancelBubble 设置为true 他也兼容各大浏览器 （不遵守w3c规范 未来这个属性要淘汰） 代码e.cancelBubble = true (强调不建议使用) 第二种stopPropagation这个方法可以阻止事件冒泡 且他遵守w3c规则 （兼容各大浏览器 ie9之前不兼容） 建议写法 if(e.sto
什么是js事件冒泡？
yycnf的博客
11-10 4324
什么是js事件冒泡？ 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或事件返回true,那么这个事件会向这个对象的的父级传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者到达了对象层次的最顶层，即document对象。 事件冒泡示例： <!DOCTYPE html> <html lang="en"> <head> <meta cha
DOM事件流的三个阶段
qq_39045065的博客
09-19 4484
事件流之事件冒泡与事件捕获 在浏览器发展的过程中，开发团队遇到了一个问题。那就是页面中的哪一部分拥有特定的事件？ 可以想象画在一张纸上的一组同心圆，如果你把手指放在圆心上，那么你的手指指向的其实不是一个圆，而是纸上所有的圆。放到实际页面中就是，你点击一个按钮，事实上你还同时点击了按钮所有的父元素。 开发团队的问题就在于，当点击按钮时，是按钮最外层的父元素先收到事件并执行，还是具体元素先收到事件并执...
2. 什么事冒泡，什么事捕获，什么是事件流
最新发布
05-12
在Web开发中，事件流是指当发生某个事件时，它会在DOM元素中按照特定的顺序传递，这个过程称为事件流。 事件流分为冒泡和捕获两种方式。 当一个事件发生在某个DOM元素上时，它会首先在祖先元素中按照从外到内的顺序进行捕获，直到达到目标元素。然后，它会在目标元素上触发，最后在祖先元素中按照从内到外的顺序进行冒泡。 事件流的过程可以用下面的代码来表示： ```html <!DOCTYPE html> <html> <head> <title>事件流</title> </head> <body> <div id="outer"> <div id="inner"> <p id="paragraph">点击我</p> </div> </div> <script> var outer = document.getElementById('outer'); var inner = document.getElementById('inner'); var paragraph = document.getElementById('paragraph'); outer.addEventListener('click', function() { console.log('outer capture'); }, true); inner.addEventListener('click', function() { console.log('inner capture'); }, true); paragraph.addEventListener('click', function() { console.log('paragraph capture'); }, true); paragraph.addEventListener('click', function() { console.log('paragraph bubble'); }, false); inner.addEventListener('click', function() { console.log('inner bubble'); }, false); outer.addEventListener('click', function() { console.log('outer bubble'); }, false); </script> </body> </html> ``` 点击段落元素时，会按照以下顺序触发事件： 1. 外层div的捕获事件（outer capture） 2. 内层div的捕获事件（inner capture） 3. 段落元素的捕获事件（paragraph capture） 4. 段落元素的冒泡事件（paragraph bubble） 5. 内层div的冒泡事件（inner bubble） 6. 外层div的冒泡事件（outer bubble） 事件流的特点是：事件从最外层元素开始向目标元素传递，然后再从目标元素向外层元素传递。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值