JS的事件冒泡

javascript中的我们经常要给元素添加一些事件，比如鼠标的移入移出，鼠标的点击，在我们添加这些事件的时候就很有可能发生事件冒泡。

比如我们写一段这样的代码：

<div id="div1">
    <div id="div2">
        <div id=div3>
        </div>
    </div>
</div>
<script type="text/javascript">
        var odiv1=document.getElementById('div1');
        var odiv2=document.getElementById('div2');
        var odiv3=document.getElementById('div3');
        function f1(){
            alert(this.id)
        }
        odiv3.onclick=f1;
        odiv2.onclick=f1;
        odiv1.onclick=f1;
</script>

css---
        #div1{
            width: 200px;
            height: 200px;
            background:red;
            padding: 30px;
        }
        #div2{
            width: 100px;
            height: 100px;
            background: green;
            padding:30px;
        }
        #div3{
            width: 50px;
            height: 50px;
            background: pink;
            padding:20px;
        }

用浏览器打开的页面是这样的，这时候如果我们点击粉红色部门的div3，那么会依次弹出div3,div2,div1。也就是说我们点击div3的时候，同时触发了div2和div1。

那会不会是因为div1和div2的面积比div3大，点击div3的时候其实也点击了div1和div2呢？

我们把div3设为绝对布局来看看。

        #div3{
            position: absolute;
            top:300px;
            width: 50px;
            height: 50px;
            background: pink;
            padding:20px;
        }

这时候我们再点击粉红色的div3，效果还是一样的，这就是js的事件冒泡。

我们来总结一下，事件冒泡的概念：“当一个元素接受到事件的时候，会把他接受到的所有事件传播到父级，一直到顶层”。

也就是说我们在点击div3的时候，会把点击事件传给div2，和div1。

再举个例子：

<input type="button" name="" value="按钮" id="btn">
    <div id="div1">
        <ul>
            <li>13123</li>
            <li>132</li>
            <li>432</li>
        </ul>
    </div>
    <script type="text/javascript">
        var obt=document.getElementById('btn');
        var odiv=document.getElementById('div1');

        obt.onclick=function(){
            odiv.style.display="block";
        }
        document.onclick=function(){
            odiv.style.display="none";
        }
css---
        #div1{
            width: 20px;
            height: 40px;
            display: none;
        }
    </script>

我们想要实现的效果是，点击按钮显示div1，然后点击其他地方则隐藏。

但实际的效果是，点击按钮之后不会有任何反应。

因为按钮是document的子集，点击按钮的时候会把点击事件传递给document，所以会同时触发显示和隐藏两个事件，也就是我们所说的事件冒泡。

解决的办法也很简单，给需要阻止冒泡的事件中调用 event.cancelBubble=true就行。（或者 Jquery 则更简单直接，return false就行）

既然冒泡这么不好，为什么还要这么设计呢？

虽然冒泡经常给我们带来不便，但是他有一个很大的优点，那就是我们去给元素添加事件的时候，就不需要挨个去添加了，我们只要找到他的父级即可。

比如上面的例子中，我只要设置document的点击事件就行，而不用去找下面的其他标签。