什么是事件冒泡

最新推荐文章于 2023-07-13 11:46:30 发布
最新推荐文章于 2023-07-13 11:46:30 发布
阅读量8.7k 收藏 31
点赞数 8
分类专栏： 事件冒泡 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/v_jinfuwu/article/details/123489997
版权

什么是事件冒泡

事件冒泡就是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件

事件冒泡的三个阶段

1、捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”，捕获阶段不会响应任何事件；
2、目标阶段：在目标节点上触发称为“目标阶段”；
3、冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”；

事件冒泡的原理

事件委托原理就是利用事件冒泡机制把里层所需要响应的事件绑定到外层

Mr.Frek
关注
  • 8
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 事件冒泡 示例代码
10-29
JS 事件冒泡 示例代码，大家可以参考下。
js如何取消事件冒泡
10-26
事件冒泡是什么意思这里就不为大家一一赘述了，下面为大家讲解的是js中如何取消事件冒泡，感兴趣的朋友可以参考下
事件冒泡与事件捕获
01-20
简单说说 事件冒泡原理 从下至上 从最里面元素事件冒泡到最外层父级元素上 大哥 二哥 三弟 var a = document.getElementsByClassName('a')[0] var b = document.getElementsByClassName('b')[0] var c = document.getElementsByClassName('c')[0] a.addEventListener(click, function (event) { console.log(大哥);
事件冒泡原理自我理解以及使用
L_YNAN的博客
06-24 1万+
首先，这是我自己在学习过程中对于时间冒泡原理的理解，如果有不对的地方，读者尽可提出，不断学习。 1.事件冒泡，就是元素自身的事件被触发后，如果父元素有相同的事件，如onclick事件，那么元素本身的触发状态就会传递，也就是冒到父元素，父元素的相同事件也会一级一级根据嵌套关系向外触发，直到document/window，冒泡过程结束。 2.比如： document.
11.①事件冒泡：取消冒泡event.cancelBubble=true或.sopImmediatePropagation()②事件绑定addEventListener(参数1，参2，参3）③事件传播
lazylYYY的博客
08-12 842
一：事件冒泡： 设置点击事件，分别点击body、box、span，分别弹出‘我是body’、‘我是box’、‘我是span’ 但是我们发现点击span时一并弹出了‘我是body’、‘我是box’、这就是冒泡 1.冒泡指的是事件的向上传导， 当元素上的某个事件被触发时，其祖先元素上的相同事件也会同时被触发 2.冒泡与子元素所在位置无关，与结构有关（就算给子元素添加定位，移出父元素里面，还是会产生冒泡） 3.要取消事件的冒泡需要用到事件对象（两种方法） ...
简述事件捕获和事件冒泡的区别
zj950307的博客
06-04 1万+
这个在面试中是一个问的比较多的问题，有时候也会在笔试的简答题中碰到。首先我们要知道：一个完整的js事件流是从window开始，最后回到window的过程，如下图所示：1-5是捕获过程，5-6是目标阶段，6-10是冒泡阶段；以一段具体的代码来看：<!DOCTYPE html> <html lang="en"> <head> <meta charset...
事件冒泡（快速理解）
热门推荐
bxz0729的博客
11-23 2万+
先看个例子： 点击box2结果如下： 点击box2结果如下： 方法二：判断event.target 和 event.currentTarget是否相等 event.target：指真正触发事件的元素 event.currentTarget：指绑定了事件监听的元素（触发事件元素的父级元素） 这时判断两者相等，则执行相应的处理函数；当事件冒泡到上一级时，event.currentTarget变成 了上一级元素，这时候判断二者不相等，则就不作响应处理逻辑。 修改第一个例子： ...
解释事件冒泡和事件捕获的原理，并说明它们之间的区别与使用场景
最新发布
weixin_53291256的博客
07-13 3883
事件冒泡和事件捕获是什么？能做什么？看完这篇你就明白了
彻底弄懂JS的事件冒泡和事件捕获
jeanFlower的博客
01-17 944
在学校，听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样，只依稀记得IE使用的是事件冒泡，其他浏览器则是事件捕获。当时的我，把它当成IE浏览器兼容问题，所以没有深究（IE8以下版本的浏览器已基本退出市场）。工作至今，虽然多次遇到该类问题，但均未深究，始终一知半解，遇到了全TM靠猜（选A不行就选B呗）。今天闲来无事自己做了个demo,算是把这个问题彻底搞明白了。 先上结论：他们是描述事件触发
深入理解JavaScript的事件冒泡与事件捕获
金鳞踏雨
03-09 4483
JavaScript中提供了很多操作DOM的API。事件冒泡和事件捕获是指浏览器中处理DOM元素上事件的两种不同方式。事件冒泡和事件捕获都是JavaScript事件模型中的一部分，可以用来处理事件。对于这个问题，在实际开发中，并不是非常重要，因为在工作中我们基本上不会直接操作DOM，为了高效一般都是通过Vue、React这些框架，所以关于事件处理程序的一些坑直接就被避免了！！！但是，多了解一点是没有坏处的，毕竟面试会考~
js基础（二）：事件（事件冒泡、事件捕获、事件对象、事件委托）
ThisEqualThis的博客
11-11 2549
事件 javascript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。 事件流 事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。 事件冒泡 IE的事件流叫做事件冒泡（event bubbling）,即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，...
JavaScript 事件冒泡简介及应用
12-10
一、什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。 二、事件冒泡有什么作用 （1）事件冒泡允许多个操作被集中处
JavaScript 事件冒泡应用实例分析
10-29
在一些传统的小型WEB应用开发过程中，JavaScript通常只是拿来做表单验证而以，所以你很少会遇到因为JavaScript事件冒泡而影响功能的实现情况，又或者事件冒泡对最终实现效果影响不大，可忽略。
javascript事件冒泡简单示例
10-22
主要介绍了javascript事件冒泡原因、显示效果及阻止冒泡的方法,需要的朋友可以参考下
理解jquery事件冒泡
01-19
一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...
详解javascript事件冒泡
10-23
主要向大家介绍了javascript事件冒泡，以及javascript阻止事件冒泡的实现代码，感兴趣的朋友可以参考一下
事件冒泡是什么如何用jquery阻止事件冒泡
10-27
什么是事件起泡：一个事件不能凭空产生，这就是事件的发生等等，接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证，感兴趣的朋友可以参考下哈
事件冒泡
xiaoxingxingzai的博客
11-07 1053
事件的冒泡（Bubble） 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡 是看代码，从里往上冒泡，要想取消冒泡，是设置two不冒泡 一.有用的冒泡 <style> #one{ width: 50px; height...
JS——事件冒泡与阻止事件冒泡
Bonsoir777的博客
08-25 3095
本文主要介绍JS中有关事件流的相关知识点
什么是事件冒泡和事件捕获？
03-31
事件冒泡和事件捕获是JavaScript中处理事件的两种机制。 事件冒泡：当一个元素触发了某个事件时，该事件会从这个元素开始向外层元素逐层传递，直到传递到最外层元素。例如，当点击一个按钮时，按钮的点击事件会先被触发，然后冒泡到其父元素，再到其父元素的父元素，一直到文档的根元素。 事件捕获：与事件冒泡相反，事件捕获是从文档根元素开始，逐层向内部元素传递，直到传递到触发事件的元素。例如，当点击一个按钮时，事件会从文档根元素开始向下传递，一直到按钮，然后才会触发按钮的点击事件。 在实际应用中，事件冒泡和事件捕获可以结合使用，以达到更好的事件处理效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值