javascript事件冒泡

昨天学习了一下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>  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值