事件冒泡机制

事件冒泡 ： 当一个元素接收到事件的时候，会把他接收到的所有事件传播给他的父级，一直到顶层window

比如说我们有三个div，html代码如下：

<div id="div1">
   <div id="div2">
       <div id="div3">div>
   div>
div>

我们分别给div1，div2，div3加上点击事件，并让他加上一个事件处理函数，让他弹出自己的id

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;

当我们点击div3的时候，依次会弹出三个值，div3，div2,div1，就算我们给div3加上一个position：absolute，结果也是一样，所以说事件冒泡和样式无关，和html的结构有关，当我们点击div3的时候，div3会把点击事件传播到他的父级div2，div2继续把点击事件传播给div1，就算我们把div2给注释掉，还是会弹出div3，div1，说明div2是接收到div3传递给他的点击事件，只是没有执行事件函数，就马上把点击事件传递给div1

事件冒泡机制的优缺点：
因为每次给一个元素绑定一个事件过后，每次执行时他都会把这个事件一直冒泡到顶层，有时会对我们带来很大困扰，比如我们仿一个下拉列表，点击一个按钮的时候显示列表，点击其他地方的时候隐藏列表，我们也许会这样写：

<input type="button" id="btn" value="click"/>
<div id="div1">div>
<script>
     var oBtn = document.getElementById("btn");
     var oDiv1 = document.getElementById("div1");
      oBtn.onclick = function(){
          oDiv1.style.display = "block";
      }
      document.onclick = function(){
          oDiv1.style.display = "none"
      }
script>

但是如果我们这样写的话，点击按钮的时候就会看到没有任何反应，其实div1是执行了事件函数的，当点击div1的时候，就会执行事件函数把div显示出来，接着div1把点击事件传播给他的父级，一直到document，因为document接收到了点击事件，所以就会执行事件函数，把div1隐藏掉，所以你点击div1的时候是先显示，再隐藏，因为运行速度很快，所以你就感觉点击过后没什么反应，所以在这种情况下我们就要阻止事件的冒泡，因为冒泡是event事件对象下面的一个属性，所以我们要写成：event.cancelBubble = true;上面的代码就该这样写

oBtn.onclick = function(ev){
    var ev = ev || event;
    ev.cancelBubble = true;
    oDiv1.style.display = "block";
}
document.onclick = function(){
    oDiv1.style.display = "none"
}

当然，事件冒泡机制肯定是优点大于缺点的，比如这个列子

//css部分
#div5{
    width:100px;
    height:200px;
    position: absolute;
    right:-100px;
    top:400px;
    background: red}
#div6{
    width:30px;
    height:60px;
    background: black;
    color: #fff;
//html部分
 <div id="div1">
      <div id="div2">分享到div>
 div>

<script>
var oDiv1 = document.getElementById("div1");
oDiv2.onmouseover = function(){
    this.style.right = "0"
}

oDiv1.onmouseout = function(){
    this.style.right = "-100px"
}
script>

在这种情况下我们只需要给div1绑定事件就可以了，能够熟练的运用事件冒泡机制会给我们带来很大的方便。