冒泡现象:触发某元素的某个时间触发其父级元素的对应时间，从元素本身向上冒泡到Dom顶层
事件冒泡与阻止事件冒泡
<head lang="en">
<meta charset="UTF-8">
<title> 冒泡现象</title>
<style>
*{
margin: 0;
padding: 0;}
#div1{
display: none;
100px;
height: 100px;background: yellowgreen }
</style>
</head>
<body>
<input type="button" value="btn" id="bt1"/>
<div id="div1">
</div>
<script>
/* 冒泡现象:点击文档上的按钮时，会触发事件点击文档document */
/* window.onload=function(){
var bt=document.getElementById("bt1");
var div1=document.getElementById("div1");
bt.onclick=function(){ //冒泡机制： 点击bt时，触发bt点击事件 - 向上冒泡，触发事件点击document
//所以这里并不会显示div，因为事件冒泡机制触发事件点击document会让这个div的display属性始终为none
div1.style.display='block';
}
document.onclick=function(){
div1.style.display='none';
}
}*/
/* 阻止事件冒泡:实现效果点击按钮div显示,点击文档div消失 */
window.onload=function(){
var bt=document.getElementById("bt1");
var div1=document.getElementById("div1");
bt.onclick=function( ev){ //冒泡机制： 点击bt时，触发bt点击事件 - 向上冒泡，触发事件点击document
//所以这里并不会显示，因为事件冒泡机制触发事件点击document会让这个div的display属性始终为none
div1.style.display='block';
var ev= ev||window.event ;
ev.stopPropagation(); // 阻止事件冒泡: - 点击按钮时阻止冒泡触发上层事件（这里：点击文档事件）
}
document.onclick=function(){
div1.style.display='none';
}
}
</script>