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
通过这个例子发现，原来阻止了事件冒泡，也阻止了事件继续向下级捕获。