javascript 冒泡

javascript 冒泡

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

 

什么是冒泡

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

 

如下图:

 

Html代码  收藏代码

<div id=“parentDiv” onclick=“alert(‘parent’);”>       parent   

      <div id=“childDiv” onclick=“alert(‘child’);”>child</div>  

 </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的。

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

 

下面举个例子

 

Html代码  收藏代码

<div id=“parentDiv” onclick=“alert(‘parent’);”>  

   parent  

   <div id=“childDiv” onclick=“doSomething(this,event);”>child</div>  

</div>  

 

 

 

Js代码  收藏代码

function doSomething (obj,evt) {  

    var e=evt||window.event;  

    e.stopPropagation();  

}  

 

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

 

如何利用冒泡?

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

 

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

 

例子:

 

Html代码  收藏代码

<table onclick=“clicktd(event);” width=“400″ height=“200″ border=“1″>  

<tr>  

<td id=“td1″ width=“25%”>td1</td>  

<td id=“td2″ width=“25%”>td2</td>  

<td id=“td3″ width=“25%”>td3</td>  

<td id=“td4″ width=“25%”>td4</td>  

</tr>  

</table>  

 

Js代码  收藏代码

function clicktd(e){  

     e = e || window.event;  

var obj =  e.target || e.srcElement;  

alert(obj.id);  

}  

  

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

 

 

最后来个例子的集合

Html代码  收藏代码

<html>  

  <head>    

  <style>  

  #parentDiv{width:200px;height:200px;background:#666;}  

  #childDiv{width:100px;height:100px;background: #06C; margin:50px;}  

  </style>  

  </head>  

  <body>  

    

  没被阻止冒泡的:  

    <div id=“parentDiv” onclick=“alert(‘parent’);”>  

       parent   

       <div id=“childDiv” onclick=“alert(‘child’)”>child</div>  

    </div>  

    

  <br/>  

  被阻止冒泡的:  

    <div id=“parentDiv” onclick=“alert(‘parent’);”>  

       parent   

       <div id=“childDiv” onclick=“doSomething(this,event);”>child</div>  

    </div>  

     

    <br/>  

    冒泡的应用:  

    <table onclick=“clicktd(event);” width=“400″ height=“200″ border=“1″>  

    <tr>  

    <td id=“td1″ width=“25%”>td1</td>  

    <td id=“td2″ width=“25%”>td2</td>  

    <td id=“td3″ width=“25%”>td3</td>  

    <td id=“td4″ width=“25%”>td4</td>  

    </tr>  

    </table>  

     

    <script>  

    function doSomething (obj,evt) {   

        var e=evt||window.event;   

        alert(“child”);  

        e.stopPropagation();  

      

}   

      

    function clicktd(e){  

        ee = e || window.event;  

        var obj =  e.target || e.srcElement;  

        alert(obj.id);  

    }  

    </script>  

  </body>  

</html>  

 

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>