事件冒泡机制

事件冒泡 ： 当一个元素接收到事件的时候，会把他接收到的所有事件传播给他的父级，一直到顶层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绑定事件就可以了，能够熟练的运用事件冒泡机制会给我们带来很大的方便。