事件冒泡的理解

最新推荐文章于 2024-09-11 11:02:35 发布
原创 最新推荐文章于 2024-09-11 11:02:35 发布 · 302 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

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

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

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

请看事件冒泡结果：

其绑定事件是这样写的:

 

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

接下来就是非事件冒泡。

 功能演示:

功能演示如下:

事件代码如下:

精选资源
理解jquery事件冒泡
01-19
一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...
事件冒泡是什么如何用jquery阻止事件冒泡
10-27
事件冒泡是JavaScript中的一个重要概念，指的是事件从最具体的元素（即触发...在编写事件处理函数时，合理地使用事件冒泡机制可以减少事件处理器的数量，优化程序性能，还可以创建更加直观和易于理解的用户界面交互。
事件冒泡（快速理解）
热门推荐
bxz0729的博客
11-23 2万+
先看个例子： 点击box2结果如下： 点击box2结果如下： 方法二：判断event.target 和 event.currentTarget是否相等 event.target：指真正触发事件的元素 event.currentTarget：指绑定了事件监听的元素（触发事件元素的父级元素） 这时判断两者相等，则执行相应的处理函数；当事件冒泡到上一级时，event.currentTarget变成 了上一级元素，这时候判断二者不相等，则就不作响应处理逻辑。 修改第一个例子： ...
什么是事件冒泡
v_jinfuwu的博客
03-14 9673
什么是事件冒泡 事件冒泡就是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件 事件冒泡的三个阶段 1、捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”，捕获阶段不会响应任何事件； 2、目标阶段：在目标节点上触发称为“目标阶段”； 3、冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”； 事件冒泡的原理 事件委托原理就是利用事件冒泡机制把里层所需要响应的事件绑定到外层 ...
简单的理解事件冒泡与事件捕获
Sunday97的博客
09-24 308
例如下面的图中外面的绿色的框为父级（parent），里面的橙色框为子级(child) var parent = document.getElementsByClassName("block_P")[0]; var child = document.getElementsByClassName("block_C")[0]; parent.onclick=function() {//...
如何理解JavaScript中的事件冒泡和事件捕获
xiaoxiaojie12321的博客
04-22 487
事件冒泡IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。以下面的 HTML 页面为例：<!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title>...
在js中事件冒泡的理解分析
浮生离梦的博客
05-19 769
一. 事件 事件的三个阶段：事件捕获 -> 事件目标 -> 事件冒泡 捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象； 目标阶段：到达目标事件位置（事发地），触发事件； 冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象 事件捕获：事件发生时首先发生在document上，然后依次传递给body，最后到达目的节点（即事...
JavaScript 事件冒泡简介及应用
12-10
JavaScript 事件冒泡是Web开发中的一个重要概念，它涉及到用户与网页交互时事件的处理方式。事件冒泡是指在一个对象上触发的事件会按照从内到外的顺序...理解并掌握事件冒泡对于提升Web应用的用户体验和性能至关重要。
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
理解事件冒泡和事件捕获对于编写高效且响应式的前端代码至关重要。通过合理利用这两者，可以创建出复杂的交互效果，并精确控制事件的执行顺序，提高用户体验。同时，掌握如何阻止事件冒泡和阻止默认行为，有助于优化...
对事件冒泡， 事件捕获， dom 事件流的理解
sunflower_shao的博客
02-12 305
对事件冒泡， 事件捕获， dom 事件流的理解 事件冒泡：根据层级，由里向外逐层触发（由子元素到根元素），叫做事件冒泡（默认方式） 事件捕获：根据层级，由外向里逐层触发（由根元素到子元素），叫做事件捕获 dom事件流：当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，同时支持事件冒泡和事件捕获。 ...
事件的冒泡
qq_37953045的博客
06-11 152
事件的冒泡 众所周知如果一个子元素里触发一个事件的话，父级元素也会被触发相类别的事件，这种就叫做事件的冒泡： <div id="wrap"> wrap <div id="box"> box </div> </div> <script> (function(){ wrap.onclick = function(){ console.log("wrap"); } box.oncl
jquery事件冒泡最全精讲
u013931283的博客
01-19 132
点击此处,查看文章 转载自:http://www.shagua.wiki/project/2?p=15
什么是事件冒泡机制?
sunhy007的博客
06-23 2936
什么是 事件冒泡？ 冒泡的机制： 这气泡就相当于我们的事件，鱼就是事件源，而水则相当于我们的整个dom树；事件从dom 树的底层 层层往上传递，直至传递到dom的根节点。 栗子 : 样式布局 代码结构 js代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont
jquery的事件和“事件冒泡的解释”
ch_平凡~~生活！
08-18 795
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>       ">         My JSP 'jquery10.jsp'
事件冒泡是个啥子东西
handsome_man__的博客
03-12 535
事件冒泡是事件在处理过程或者事件流的一个阶段 事件流总共分为3个阶段 捕获阶段 - 事件在找目标元素的一个过程 目标阶段 - 事件找到目标元素，执行他的事件函数 冒泡阶段 - 事件在执行后，结尾 事件流： 事件执行的过程，3个过程：捕获阶段(在找目标元素)、目标阶段(找到目标元素并执行他的事件)、冒泡阶段(离开目标) 其他元素的事件默认会在冒泡阶段执行 如何阻止事件冒泡 - 其他元素的事件默认会在...
JavaScript的事件冒泡是什么
qq_19396231的博客
08-04 228
JavaSciprt事件中有两个很重要的特性：事件冒泡以及目标元素。 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。 任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把...
【JavaScript】事件冒泡详解
最新发布
lph159的博客
09-11 4281
事件冒泡（Event Bubbling）是指当某个元素上的事件被触发时，该事件会向父级元素传递，直到传递到document对象的过程。在此过程中，所有绑定在这些父级元素上的相同类型的事件处理程序都会依次被触发。这个传递过程就像气泡从水底逐渐向上升一样，因此被称为"冒泡"。事件冒泡是 JavaScript 中非常重要的事件模型，通过它，开发者可以简化事件处理逻辑，尤其是在动态内容和复杂交互中。理解事件冒泡的工作机制和应用场景可以帮助你编写更加高效、易维护的代码。
深入理解JavaScript事件冒泡与捕获机制
事件冒泡和捕获是网页事件处理的重要组成部分，理解它们的工作机制能够帮助开发者更有效地管理复杂的事件交互场景。在实际开发过程中，通常会结合使用事件捕获和冒泡来处理事件，以确保事件能够在正确的时间被正确地...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值