谈谈事件冒泡的看法

在学习时间冒泡机制之前做过一个小demo——分享栏

html代码：

<div id="div1">
    <span>分享到</span>
</div>

css

#div1{ 100px;height: 200px;background: #CCC;position: absolute;left: -100px;}
#div1 span{ 20px;height: 60px;line-height: 20px;text-align: center;background: yellow;position: absolute;left: 100px;top: 70px;}

要实现的功能很简单，就是当鼠标移入span的时候div的left为0，当鼠标移出div或span的时候div的left为0。

当时写的js

window.onload=function(){
    
      var oDiv=document.getElementById('div1');
      
        oDiv1.onmouseover=function(){
            oDiv1.style.left=0;
            
        }
        oDiv1.onmouseout=function(){
            oDiv1.style.left=-100+'px';
        }



};

当时也没仔细看，为什么明明给div添加的鼠标移入移除事件，但是当鼠标移入移除的时候也能实现功能，直到学到事件冒泡机制才恍然大悟

事件冒泡其实是IE的事件流（另一种事件流是Netscape的时间捕获流），它表达的思想是事件由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的点（文档），所有现代浏览器都支持事件冒泡机制，但在具体实际上有些差别，IE5.5以及更早的版本中的事件冒泡会跳过<html>元素，IE9、firefox、chrome和safari则将事件一直冒泡到window对象

看一个小例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        div{padding: 40px;}
        #div1{background: #101010;}
        #div2{background: red;}
        #div3{background: green;}
        </style>
        <script>
            window.onload=function(){
                var oDiv1=document.getElementById('div1');
                var oDiv2=document.getElementById('div2');
                var oDiv3=document.getElementById('div3');
                
                function fn(){
                    alert(this.id);
                }
                
                oDiv1.onclick=fn;
                oDiv2.onclick=fn;                oDiv3.onclick=fn;
            };
        </script>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div id="div3"></div>
            </div>
        </div>
    </body>
</html>

（div1、div2、div3）注意是从外到里的顺序

当只给div1添加点击事件的时候，无论点击div1、div2、div3都会弹出div1的ID，（因为点击div3，它虽然没有发生的具体事件，但是它会把事件传给div2，同理div2传给div3，由父级来执行事件函数）

当只给div2添加点击事件的时候，点击div2.div3都会弹出div2的ID，但此时点击div1没有任何反应，因为div1虽然会接受点击事件，但是没有具体的事情要做

当只给div3添加点击事件的时候，只有点击div3会弹出div3的ID

同时给div1、div2、div3添加点击事件的时候，很有意思的事情发生了：

当点击div3（最里面的元素），会相继弹出，div3、div2、div1，虽然没有点击外面两个，但是由于事件冒泡事件发生，事件会由里向外传播，是他们各自执行自己的事件函数

点击div2、会相继弹出div2.div1

同理点击div1，只会弹出div1

当注释掉div2，点击div3，会弹出div3、div1；这是因为div2被注释，但是点击事件是存在的，只是没有具体的事件函数而已。并不会影响他的事件冒泡机制。

事件冒泡机制默认是存在的

要想阻止事件冒泡，可以在当前要阻止的事件函数中调用event.cancelBubble=true;

事件冒泡机制默认存在是因为在很多例子中可以带来很多的方便。不希望存在的时候阻止就好了。