事件冒泡的理解

最新推荐文章于 2023-07-13 11:46:30 发布
最新推荐文章于 2023-07-13 11:46:30 发布
阅读量226 收藏
点赞数
分类专栏： 微信学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lizichen147/article/details/103480242
版权

我们在学习前端,这是一个javascript的问题,今天搬到微信上理解了。

事件冒泡的本质:当前div块以及父级div块，以及父级的父级，你懂的。都会被触发的事件。前提是，每个块级都有对应的事件触发方法。

请看我的冒泡事件的结果：

请看事件冒泡结果：

其绑定事件是这样写的:

 

而针对于事件冒泡的问题,那么肯定有人提出问题,那么如果不想事件冒泡怎么解决呢?

接下来就是非事件冒泡。

 功能演示:

功能演示如下:

事件代码如下:

凡是让你费力的多数是错的
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
理解jquery事件冒泡
10-23
主要介绍了jquery事件冒泡，以及如何阻止jQuery事件冒泡现象，感兴趣的朋友可以参考一下
什么是事件冒泡
v_jinfuwu的博客
03-14 9073
什么是事件冒泡 事件冒泡就是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件 事件冒泡的三个阶段 1、捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”，捕获阶段不会响应任何事件； 2、目标阶段：在目标节点上触发称为“目标阶段”； 3、冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”； 事件冒泡的原理 事件委托原理就是利用事件冒泡机制把里层所需要响应的事件绑定到外层 ...
什么是事件冒泡，它是如何工作的？如何阻止事件冒泡？
qq_34639706的博客
03-04 4749
1、什么是事件冒泡，他是如何工作的 在一个对象上触发某类事件（比如单击 onclick 事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即 document 对象（有些浏览器是 window） 2、阻止事件冒泡的几种方法 2.1）第一种：event.stopPropagation(); 2.2）第二种：ret
解释事件冒泡和事件捕获的原理，并说明它们之间的区别与使用场景
weixin_53291256的博客
07-13 4580
事件冒泡和事件捕获是什么？能做什么？看完这篇你就明白了
事件冒泡原理自我理解以及使用
L_YNAN的博客
06-24 1万+
首先，这是我自己在学习过程中对于时间冒泡原理的理解，如果有不对的地方，读者尽可提出，不断学习。 1.事件冒泡，就是元素自身的事件被触发后，如果父元素有相同的事件，如onclick事件，那么元素本身的触发状态就会传递，也就是冒到父元素，父元素的相同事件也会一级一级根据嵌套关系向外触发，直到document/window，冒泡过程结束。 2.比如： document.
事件冒泡（快速理解）
热门推荐
bxz0729的博客
11-23 2万+
先看个例子： 点击box2结果如下： 点击box2结果如下： 方法二：判断event.target 和 event.currentTarget是否相等 event.target：指真正触发事件的元素 event.currentTarget：指绑定了事件监听的元素（触发事件元素的父级元素） 这时判断两者相等，则执行相应的处理函数；当事件冒泡到上一级时，event.currentTarget变成 了上一级元素，这时候判断二者不相等，则就不作响应处理逻辑。 修改第一个例子： ...
js如何取消事件冒泡
10-26
在JavaScript中，事件...总的来说，理解并掌握事件冒泡以及如何取消它对于编写高性能、可维护的JavaScript代码至关重要。在处理复杂的交互逻辑时，合理地利用这些方法能帮助我们更好地控制事件的流程，提高用户体验。
JavaScript 事件冒泡简介及应用
12-10
JavaScript 事件冒泡是Web开发中的一个重要概念，它涉及到用户与网页交互时事件的处理方式。事件冒泡是指在一个对象上触发的事件会按照从内到外的顺序...理解并掌握事件冒泡对于提升Web应用的用户体验和性能至关重要。
javascript事件冒泡简单示例
10-22
理解事件冒泡的概念对于编写高效的JavaScript代码至关重要，因为它允许你在更高层级的元素上处理事件，而不是为每一个子元素都添加事件监听器。然而，有时候你可能希望阻止事件冒泡，比如当你只想在特定元素上响应...
事件冒泡是个啥子东西
handsome_man__的博客
03-12 446
事件冒泡是事件在处理过程或者事件流的一个阶段 事件流总共分为3个阶段 捕获阶段 - 事件在找目标元素的一个过程 目标阶段 - 事件找到目标元素，执行他的事件函数 冒泡阶段 - 事件在执行后，结尾 事件流： 事件执行的过程，3个过程：捕获阶段(在找目标元素)、目标阶段(找到目标元素并执行他的事件)、冒泡阶段(离开目标) 其他元素的事件默认会在冒泡阶段执行 如何阻止事件冒泡 - 其他元素的事件默认会在...
什么是事件冒泡机制?
sunhy007的博客
06-23 2827
什么是 事件冒泡？ 冒泡的机制： 这气泡就相当于我们的事件，鱼就是事件源，而水则相当于我们的整个dom树；事件从dom 树的底层 层层往上传递，直至传递到dom的根节点。 栗子 : 样式布局 代码结构 js代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont
事件冒泡详解及阻止事件冒泡
我只是个很菜的前端
07-20 2603
事件冒泡 js 阻止事件冒泡
事件冒泡学个透
杜永康的博客
12-09 1165
事件冒泡，这一逻辑学名词对于很多初次学习js的程序员还是比较抽象，我想尝试用一种直观的方式，在这里将这个东西讲透。首先我们去查看了事件冒泡的百度解释：这一解释相对比较友好，但是难免还有些官方话。到底该怎么理解呢？我们往下看： 接下来再为此框架设置简单的样式，样式呈现： 然后我们点击每个颜色不一样的元素，得到以下结果： 程序员，这有什么规律，又说明什么？你发现了，事件是由内向外触发的。正如事件冒泡名字本身一样形象，泡泡都是从水里开始出现，向水面移动，直到溢出水面爆炸，冒泡结束。在编程语言里，
js事件冒泡详解和使用场景
Youyzq的博客
11-14 2309
事件冒泡就是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件。
事件循环与冒泡
bian2845972116的博客
01-03 502
事件循环分为三个阶段，一为捕获阶段，二为目标阶段，三为冒泡阶段，要理解事件循环和冒泡，就得理解他们的执行顺序和过程
js 事件循环(event loop) & 事件冒泡
xueer43的博客
05-04 456
事件循环(event loop) ### 执行顺序 执行顺序：同步任务 -> 异步任务(微任务 -> 宏任务) 宏任务(放在callback queue中，由事件触发线程维护: script(整体代码), setTimeout, setInterval, UI 渲染, postMessage, MessageChannel, I/O, setImmediate(Node环境) 微任务(放在微任务队列中，由js引擎线程维护: promise......
事件冒泡
weixin_30675967的博客
09-28 76
#转载请留言联系 什么是事件冒泡？ 事件冒泡，指代在js中，被包含的子标签一旦触发了某种事件，那么父元素的同名事件也会被逐层触发，一直到没有父标签的html标签中。 事件冒泡示例 创建一个大的框框，背景色为绿色。然后在大框框里创建一个小框框，背景色为红色。需求是当点大框框的内容时，大框框的背景色变成蓝色。当点小框框的内容时，小框框的背景色变成蓝色。 ...
简单了解事件冒泡和阻止事件冒泡
D____ppx的博客
03-29 2675
1.什么叫事件冒泡？ 就是在触发事件时候 会一层一层向上冒泡(他同时会触发父类的事件) 2.阻止事件冒泡 意思就是阻止事件向上传递 第一种ie浏览器的阻止事件冒泡 利用了一种属性cancelBubble 设置为true 他也兼容各大浏览器 （不遵守w3c规范 未来这个属性要淘汰） 代码e.cancelBubble = true (强调不建议使用) 第二种stopPropagation这个方法可以阻止事件冒泡 且他遵守w3c规则 （兼容各大浏览器 ie9之前不兼容） 建议写法 if(e.sto
事件冒泡和事件捕获用处
最新发布
08-17
- *1* *2* *3* [深入理解JavaScript的事件冒泡与事件捕获](https://blog.csdn.net/weixin_43715214/article/details/129415062)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值