javascript事件冒泡

最新推荐文章于 2024-07-08 08:31:14 发布
最新推荐文章于 2024-07-08 08:31:14 发布
阅读量89 收藏
点赞数
分类专栏： javascript 文章标签： javascript事件冒泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lnjzwl0609/article/details/84177271
版权

昨天学习了一下javascript的冒泡，和大家分享在这里，有异议的请留言讨论。

 

什么是冒泡

简单的说就是触发一个子容器的事件，父容器的事件也会跟着被触发。

 

如下图：

 

Html代码 复制代码  收藏代码
  1. <div id="parentDiv" onclick="alert('parent');">       parent    
  2.       <div id="childDiv" onclick="alert('child');">child</div>  
  3.  </div>   

我们在child和parent上分别添加了alert('child')和alert('parent')事件，这个时候假如我们点击child，会先执行alert('child')，然后父元素的alert('parent')也会被执行，当然假如还有更多的层次，父级的事件会依次被触发，这就是冒泡。

 

但有些时候我么会不需要这样的机制，不如我们点击child只想触发child上的alert('child')事件，那么我们就要阻止冒泡的发生，做法如下。

 

如何阻止冒泡？

阻止冒泡有两种方法

e.cancelBubble=true;

e.stopPropagation();

 

据说e.stopPropagation();是针对firefox的，e.cancelBubble=true;是针对IE的。

但经过我测试了一下这两个方法在ie，firefox，opera，chrome上都可用，可能会根据版本有差异吧，大家自己判断吧

 

下面举个例子

 

Html代码 复制代码  收藏代码
  1. <div id="parentDiv" onclick="alert('parent');">  
  2.    parent   
  3.    <div id="childDiv" onclick="doSomething(this,event);">child</div>  
  4. </div>  

 

 

 

Js代码 复制代码  收藏代码
  1. function doSomething (obj,evt) {   
  2.     var e=evt||window.event;   
  3.     e.stopPropagation();   
  4. }  

 

因为在doSomething里阻止了冒泡，所以parentDiv上的alert('parent')事件也就不会被触发了。

 

如何利用冒泡？

当然有的时候我们还会利用一下冒泡，满足我们的需求，比如有很多个元素都要添加一个事件来处理某件事，但是假如把某个元素上都加上onclick的话，首先性能不说，这么多的代码也会让人嗤之以鼻，这就可以用到冒泡。

 

因为这些元素事件的触发都能够通过冒泡来触发他父亲的事件，那就只给他父亲加上事件吧，然后再判断确切是那个元素的时间被触发。然后你就可以为所欲为了。

 

例子：

 

Html代码 复制代码  收藏代码
  1. <table onclick="clicktd(event);" width="400" height="200" border="1">  
  2. <tr>  
  3. <td id="td1" width="25%">td1</td>  
  4. <td id="td2" width="25%">td2</td>  
  5. <td id="td3" width="25%">td3</td>  
  6. <td id="td4" width="25%">td4</td>  
  7. </tr>  
  8. </table>  
Js代码 复制代码  收藏代码
  1. function clicktd(e){   
  2.      e = e || window.event;   
  3. var obj =  e.target || e.srcElement;   
  4. alert(obj.id);   
  5. }  

这里主要是通过e.target 或e.srcElement(根据浏览器不同)获取确切的元素。接下来怎么做大家应该知道了。

 

 

最后来个例子的集合

 

 

Html代码 复制代码  收藏代码
  1. <html>  
  2.   <head>     
  3.   <style>  
  4.   #parentDiv{width:200px;height:200px;background:#666;}   
  5.   #childDiv{width:100px;height:100px;background: #06C; margin:50px;}   
  6.   </style>  
  7.   </head>  
  8.   <body>  
  9.      
  10.   没被阻止冒泡的：   
  11.     <div id="parentDiv" onclick="alert('parent');">  
  12.        parent    
  13.        <div id="childDiv" onclick="alert('child')">child</div>  
  14.     </div>  
  15.      
  16.   <br/>  
  17.   被阻止冒泡的：   
  18.     <div id="parentDiv" onclick="alert('parent');">  
  19.        parent    
  20.        <div id="childDiv" onclick="doSomething(this,event);">child</div>  
  21.     </div>  
  22.       
  23.     <br/>  
  24.     冒泡的应用：   
  25.     <table onclick="clicktd(event);" width="400" height="200" border="1">  
  26.     <tr>  
  27.     <td id="td1" width="25%">td1</td>  
  28.     <td id="td2" width="25%">td2</td>  
  29.     <td id="td3" width="25%">td3</td>  
  30.     <td id="td4" width="25%">td4</td>  
  31.     </tr>  
  32.     </table>  
  33.       
  34.     <script>  
  35.     function doSomething (obj,evt) {    
  36.         var e=evt||window.event;    
  37.         alert("child");   
  38.         e.stopPropagation();   
  39.        
  40. }    
  41.        
  42.     function clicktd(e){   
  43.         ee = e || window.event;   
  44.         var obj =  e.target || e.srcElement;   
  45.         alert(obj.id);   
  46.     }   
  47.     </script>  
  48.   </body>  
  49. </html>  
lnjzwl0609
关注
专栏目录
JavaScript事件冒泡
qq3305559894的博客
03-10 1423
今天我要分享的JavaScript事件冒泡的知识点 1.知识点分享 JavaScript 事件冒泡主要是声明变量，获取点击事件，触发点击事件的动画； 2.就是JavaScript的触发动画效果和点击事件 3.以下是html的知识点代码如下： 正在上传…重新上传取消 还有css的样式代码如下图： 给body，box,innerBox设置背景颜色。 正在上传…重新上传取消 Js 代码如下图所示： 首先获取box，在获取innerBox给innerBox添加绑定点击事件。事件对象event=even
JavaScript 事件冒泡应用实例分析
12-01
JavaScript事件冒泡是DOM（文档对象模型）中事件处理的核心机制之一，它描述了事件从最深的DOM节点开始触发，然后逐级向上层节点传播的过程。在大型的Web交互项目，尤其是WebGame中，对事件冒泡的精确控制至关重要，...
JavaScript 事件冒泡
LiLi_code的博客
01-16 345
事件冒泡：子元素的onclick事件 触发完会传导到父元素的onclick事件去 一、用以下例子演示：其中 &lt;li&gt; 是 &lt;a&gt; 的子元素 &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt;
Javascript的事件冒泡
Night_nigh的博客
03-27 1万+
今天呢，来讲一个知识点，叫做Javascript的事件冒泡（Bubble），什么叫事件冒泡，就是指某件事件的向上传导，当后代元素被触发，其祖先元素也会被同样触发，这就是事件冒泡，光说不行，还得先演示一下。 首先，我们先创建一个“HTML”文档，在头部部分写上一个内联样式“style”，给“body”一个背景颜色，在“body”部分写上两个“div”给他们写上一个“ID”名（取名随意） 再创建两个不同大小的方块也给他们一个背景颜色（这里大小 颜色随意），就像这样： 然后就开始“...
JavaScript事件的冒泡
haojieji的博客
08-23 441
事件的委派：事件统一绑定共同祖先，当后代元素事件触发，会一直冒泡到祖先，通过祖先元素的响应函数处理。
深入理解JavaScript事件冒泡
秋水不寒的专栏
05-27 3412
一、什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 打个比方说：你在
什么是JavaScript中的事件冒泡（event bubbling）和事件捕获（event capturing）？
热门推荐
官方推荐
07-08 1万+
什么是JavaScript中的事件冒泡（event bubbling）和事件捕获（event capturing）？
阻止JavaScript事件冒泡到父元素
sayyy的专栏
09-02 586
前言 略 问题 有代码如下： <div class='preview_image_container'> <!--图片--> <div onclick='details(this)'> <img class='preview_image' src='xx.png' /> <div class='preview_name' >xxx</div> </div> <!--删除按钮-->
JavaScript 事件冒泡与捕获机制 --- 带动态图理解
好的文章我尽力写，大家的学习我尽力帮
12-13 1040
JS的冒泡与捕获机制的理解 ，事件委托方法的实现
javascript事件冒泡与事件委派
Sore4的博客
04-28 271
JavaScript事件冒泡 1.JavaScript事件冒泡（Bubble）；所谓冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。 2.在开发中大部分情况冒泡都是有用的，如果不希望冒泡发生可以通过事件对象取消冒泡event.cancelBubble=true 3.案列如下： id“box”和“innerBox”背景颜色可任意设置一个 （box背景颜色粉红色，innerBox背景颜色紫色） Html源代码： 4.Css源代码： 没有使用link标签
JavaScript 事件冒泡简介及应用
12-10
JavaScript 事件冒泡是Web开发中的一个重要概念，它涉及到用户与网页交互时事件的处理方式。事件冒泡是指在一个对象上触发的事件会按照从内到外的顺序依次经过其所有父级元素，直到到达文档的根节点（通常是document...
javascript事件冒泡简单示例
10-22
在下面的示例中，我们将详细探讨JavaScript中的事件冒泡、其原因以及如何阻止它。 事件冒泡是指事件从最深的DOM元素（即事件触发的元素）开始，然后逐级向上层元素传播事件。在这个过程中，每个节点都会接收到相同...
详解javascript事件冒泡
10-23
事件冒泡是JavaScript中非常重要的一个概念，它描述了事件在DOM树结构中的传播方式。在事件冒泡过程中，一旦某个元素上的事件被触发，那么这个事件会从元素本身开始，沿着DOM树向上层元素传播，直到到达根节点。在此...
JavaScript事件冒泡与取消事件冒泡代码演示
04-16
本段代码演示了如何使用JavaScript取消HTML事件的冒泡，即当后代元素的事件被触发时，祖先元素的相同事件也会被触发。代码中，页面包含一个div元素和一个嵌套在其中的span元素，分别设置了单击响应函数。当单击span...
基于SpringBoot仿天猫购物系统.zip(毕设&课设&实训&大作业&竞赛&项目)
09-20
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
Python网络爬虫与推荐算法新闻推荐平台(毕设&课设&实训&大作业&竞赛&项目)
最新发布
09-20
Python网络爬虫与推荐算法新闻推荐平台：网络爬虫：通过Python实现新浪新闻的爬取，可爬取新闻页面上的标题、文本、图片、视频链接（保留排版） 推荐算法：权重衰减+标签推荐+区域推荐+热点推荐.zip项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
THUCNews数据集
09-20
THUCNews数据集
Q音：Vue3+Pinia+Vue Router4+Vant4的移动端仿抖音短视频项目.zip(毕设&课设&实训&大作业&竞赛&
09-20
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
javascript事件冒泡与捕获机制详解及应用
在深入理解JavaScript编程时，事件冒泡和捕获机制是开发者常常遇到的重要概念，尤其是在处理复杂DOM结构时。本文将详细介绍这两个核心知识点，并通过实例来阐明其工作原理。 首先，事件的发生顺序是基于元素的层次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值