事件冒泡、事件捕获、事件委托

1、定义

事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。
相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。
true,事件捕获；false,事件冒泡。默认false,即事件冒泡。e.stopPropagation会阻止冒泡

2、示例

<div id="div1">
　　<div id="div2">元素</div>
</div>
<script>

　　//事件冒泡

　　var div1 = document.getElementById("div1");
　　var div2 = document.getElementById("div2");

　　div2.addEventListener("click", function(e){console.log("孩子事件")}, true);
　　div1.addEventListener("click", function(e){console.log("父亲事件")}, true);

</script>

<script>

　　//事件捕获
　　var div1 = document.getElementById("div1");
　　var div2 = document.getElementById("div2");

　　div2.addEventListener("click", function(e){console.log("孩子事件")}, true);
　　div1.addEventListener("click", function(e){console.log("父亲事件")}, true);
</script>

3、取消冒泡（两种方式）

标准的W3C 方式：e.stopPropagation();这里的stopPropagation是标准的事件对象的一个方法，调用即可

非标准的IE方式:ev.cancelBubble=true; 这里的cancelBubble是 IE事件对象的属性，设为true就可以了

function stopBubble(e) {
    //如果提供了事件对象，则这是一个非IE浏览器
   if ( e && e.stopPropagation )
      //因此它支持W3C的stopPropagation()方法
      e.stopPropagation();
  else{
  //否则，我们需要使用IE的方式来取消事件冒泡
    window.event.cancelBubble = true;
　　}
}
4、事件冒泡应用（事件委托或称事件代理）
优点：<1>新添加的元素还会有之前的事件<2>减少循环添加事件，性能更好

<script>

　　window.onload = function(){
　　　　var oUl = document.getElementById('ull');
　　　　var aLi = document.getElementsByTagName('li');

　　　　oUl.onmouseover = function(ev){
　　　　　　var event = ev||window.event; // 获取event对象
　　　　　　var target = ev.target || ev.srcElement; // 获取触发事件的目标对象

　　　　　　if(target.nodeName.toLowerCase() == 'li'){ //判断目标对象是不是li
　　　　　　　　target.style.background = 'red';
　　　　　　}

　　　　}

　　}

</script>