JavaScript冒泡实例

最新推荐文章于 2022-03-27 10:33:11 发布

lijunlinlijunlin

最新推荐文章于 2022-03-27 10:33:11 发布

阅读量418

点赞数

分类专栏： javaScript

javaScript 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

什么是冒泡简单的说就是触发一个子容器的事件，父容器的事件也会跟着被触发。 div id=parentDiv οnclick=alert('parent'); parent div id=childDiv οnclick=alert('child');child/div /div 在child和parent上分别添加了alert('child')和alert('parent')事件

什么是冒泡
简单的说就是触发一个子容器的事件，父容器的事件也会跟着被触发。
    <div id="parentDiv" οnclick="alert('parent');">       parent
          <div id="childDiv" οnclick="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的。
下面举个例子
    <div id="parentDiv" οnclick="alert('parent');">
       parent
       <div id="childDiv" οnclick="doSomething(this,event);">child</div>
    </div>
    function doSomething (obj,evt) {
        var e=evt||window.event;
        e.stopPropagation();
    }
因为在doSomething里阻止了冒泡，所以parentDiv上的alert('parent')事件也就不会被触发了。

如何利用冒泡？
当然有的时候我们还会利用一下冒泡，满足我们的需求，比如有很多个元素都要添加一个事件来处理某件事，但是假如把某个元素上都加上onclick的话，首先性能不说，这么多的代码也会让人嗤之以鼻，这就可以用到冒泡。
因为这些元素事件的触发都能够通过冒泡来触发他父亲的事件，那就只给他父亲加上事件吧，然后再判断确切是那个元素的时间被触发。然后你就可以为所欲为了。
例子：
    <table οnclick="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>
    function clicktd(e){
         e = e || window.event;
    var obj = e.target || e.srcElement;
    alert(obj.id);
    }
这里主要是通过e.target 或e.srcElement(根据浏览器不同)获取确切的元素。接下来怎么做大家应该知道了。
最后来个例子的集合
    <html>
      <head>
      <title>www.hzpinsen.cn</title>
      <style>
      #parentDiv{width:200px;height:200px;background:#666;}
      #childDiv{width:100px;height:100px;background: #06C; margin:50px;}
      </style>
      </head>
      <body>
      没被阻止冒泡的：
        <div id="parentDiv" οnclick="alert('parent');">
           parent
           <div id="childDiv" οnclick="alert('child')">child</div>
        </div>

      <br/>
      被阻止冒泡的：
        <div id="parentDiv" οnclick="alert('parent');">
           parent
           <div id="childDiv" οnclick="doSomething(this,event);">child</div>
        </div>

        <br/>
        冒泡的应用：
        <table οnclick="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>

转载自：http://www.hzpinsen.cn/html/wyzz/JavaScript_Ajax/2012_0223_19529.html

lijunlinlijunlin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript冒泡实例

什么是冒泡简单的说就是触发一个子容器的事件，父容器的事件也会跟着被触发。 div id=parentDiv onclick=alert('parent'); parent div id=childDiv onclick=alert('child');child/div /div 在child和parent上分别添加了alert('child')和alert('parent')事件
复制链接

扫一扫

专栏目录