欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS的事件冒泡和事件捕获

程序员文章站 2022-05-06 08:01:25
...

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