在学习时间冒泡机制之前做过一个小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;
事件冒泡机制默认存在是因为在很多例子中可以带来很多的方便。不希望存在的时候阻止就好了。