事件冒泡、事件捕獲、事件委託

一、定義

事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。
相反的，事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數，就是控制事件觸發順序是否爲事件捕獲。
true,事件捕獲；false,事件冒泡。默認false,即事件冒泡。e.stopPropagation會阻止冒泡

二、示例

<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>

三、取消冒泡（兩種方式）

標準的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;
　　}
}
四、事件冒泡應用（事件委託或稱事件代理）
優勢：<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>