事件冒泡：当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window，
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
div{padding: 40px;}
#div1{background: red;}
#div2{background: gold;}
#div3{background: firebrick;}
</style>
<script>
window.onload = function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oDiv3=document.getElementById('div3');
function fn1(){
alert(this.id);
}
oDiv1.onclick = fn1;
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
三个div层层嵌套，当我只点击div3时，div3,div2.div1都弹出来了，这就是事件冒泡
如果把div3的点击事件取消，div2,div1仍然能够弹出。
下拉菜单：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
#div1{
width: 100px;
height: 200px;
border: 1px solid red;
display: none;}
</style>
<script type="text/javascript">
window.onload= function(){
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
//出现事件冒泡，不能得到预期效果
oBtn.onclick = function(){
oDiv.style.display = 'block';
}
document.onclick = function(){
oDiv.style.display = 'none';
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="div1">
</div>
</body>
</html>
按钮点击也不显示div1
下面代码加了定时器，延迟了事件冒泡，
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
#div1{
width: 100px;
height: 200px;
border: 1px solid red;
display: none;}
</style>
<script type="text/javascript">
window.onload= function(){
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
oBtn.onclick = function(){
oDiv.style.display = 'block';
}
document.onclick = function(){
setTimeout(function(){
oDiv.style.display = 'none';
},1000);
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="div1">
</div>
</body>
</html>
过1s后红方块消失
思考：为什么会有事件冒泡呢？这么不好用的东西，直接去掉不行吗？
如果没有事件冒泡，想想如果想实现点击页面上的任何一个元素都可以把方块隐藏掉，是不是要获取页面总成千上万个元素，然后进行隐藏的处理，才能实现，如果有冒泡，只需要给共同的父级document加点击事件处理，当你点击页面中任何一个元素，他就会传到他的父级，完成隐藏操作。
阻止冒泡：当前要阻止冒泡的事件函数中调用event.cancelBubble = true;
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
#div1{
width: 100px;
height: 200px;
border: 1px solid red;
display: none;}
</style>
<script type="text/javascript">
window.onload= function(){
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
oBtn.onclick = function(ev){
var ev = ev || event;
ev.cancelBubble = true;
oDiv.style.display = 'block';
}
document.onclick = function(){
setTimeout(function(){
oDiv.style.display = 'none';
},1000);
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="div1">
</div>
</body>
</html>
----------------------------------------------------------------------------------
冒泡例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
#div1{
width: 100px;
height: 200px;
background: red;
position:absolute;left: -100px;top: 100px;}
#div2{
width: 30px;height: 60px;position: absolute;right: -30px;top: 70px;background: black;color: white;text-align: center;
}
</style>
<script type="text/javascript">
window.onload= function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
this.style.left = '0px';
}
oDiv.onmouseout = function(){
this.style.left = '-100px';
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">分享到</div>
</div>
</body>
</html>
