JS的事件冒泡和事件捕獲

JS在預設情況下冒泡執行事件，就開始從根項目開始捕獲所有該事件的監聽對象。我們可以通過綁定事件時，指定事件執行時在冒泡階段還是捕獲階段。

obj.addEventListener(event,function(){},bool)；bool:false，代表冒泡階段執行bool:true，代表捕獲階段執行

Example：

　　　　<ul>            <li>item1</li>            <li>item2</li>            <li>item3</li>            <li>item4</li>            <li>item5</li>            <li>item6</li>        </ul>

譬如有ul事件和li事件，點擊li後 事件捕獲

自上而下的去觸發事件，先觸發ul事件，再觸發li事件

document.getElementById("parentId").addEventListener("click",function(e){    alert('****** Trigger parent event ******');}, true);

事件冒泡

自下而上的去觸發事件，先觸發li事件，再觸發ul事件 阻止事件冒泡

w3c的方法是e.stopPropagation()，IE則是使用e.cancelBubble = true；

<script type="text/javascript">      var obj1=document.getElementById('id1');       obj1.addEventListener('click',function(e){curClick('id1');stopPropagation(e)},false);      var obj2=document.getElementById('id2');      obj2.addEventListener('click',function(e){curClick('id2');stopPropagation(e)},true);      var obj3=document.getElementById('id3');      obj3.addEventListener('click',function(e){curClick('id3');stopPropagation(e)},true);      function curClick(id){          alert(id);      }      function  stopPropagation(e){          var e = window.event || event;            if(e.stopPropagation) { //W3C阻止冒泡方法                e.stopPropagation();            } else {                e.cancelBubble = true; //IE阻止冒泡方法            }       }      </script>  

當點擊id3：執行結果：id2
當點擊id2：執行結果：id2
當點擊id1：執行結果：id1
通過這個例子發現，原來阻止了事件冒泡，也阻止了事件繼續向下級捕獲。