一、什么是冒泡事件
所谓冒泡事件就是子集发生事件后，会不断的往父集传递 ，继续执行父集及更高集的事件。
二、举个简单的例子
<div style="width:300px; height:300px; background:red;" onclick="alert(this.style.background);">
<div style="width:200px; height:200px; background:green;" onclick="alert(this.style.background);">
<div style="width:100px; height:100px; background:#CCC;" onclick="alert(this.style.background);">
</div>
</div>
</div>
这里有3个div，层层镶嵌，每一个div对应一个事件，当点击最里层的div之后，会执行本身的事件，执行完本身的事件后，会继续执行他父亲的事件，继而执行他爷爷的事件，也就是会连续执行3次，这就是冒泡时间。
三、阻止冒泡事件
代码：oEvent.cancelBubble=true;
四、实例操作
工作中常用到的实例 -- 点击按钮展示下拉框，点击页面其他位置收起下拉框
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>阻止事件冒泡--点击按钮下拉菜单展示，点击页面其他位置菜单收起</title>
<style>
#div1{width: 200px;height: 300px;background: #CCC;display: none;}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function (){
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(ev){
oEvent=ev||event; //事件对象的兼容写法
oDiv.style.display="block"; //点击按钮下拉框展示
//alert(1)
oEvent.cancelBubble=true; //阻止事件冒泡
}
document.onclick=function(){
oDiv.style.display="none"; //点击页面其他位置下拉收起
//alert(2)
}
}
</script>
<input type="button" id="btn1" value="button">
<div id="div1"></div>
</body>
</html>
