事件捕获与冒泡的再探

先看一段代码，猜猜输出结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    

    <div id="id1" style="width: 200px;height:200px;border: 1px solid #888;">
        ggggg
    </div>


        <script type="text/javascript">
            var obj1=document.getElementById('id1'); 
            obj1.addEventListener('click',function(e){curClick('1');stopPropagation(e)},false);
                     
            obj1.addEventListener('click',function(e){curClick('2');stopPropagation(e)},true);
         
            obj1.addEventListener('click',function(e){curClick('3');stopPropagation(e)},true);

            obj1.addEventListener('click',function(e){curClick('4');stopPropagation(e)},false);
            
            function curClick(id){
                alert(id);
            }
         
            function  stopPropagation(e){
                // return
                var e = window.event || event;  
                if(e.stopPropagation) { //W3C阻止冒泡方法  
                    e.stopPropagation();  
                } else {  
                    e.cancelBubble = true; //IE阻止冒泡方法  
                } 
            }     

    </script>
</body>
</html>

　无论stopPropagation函数里是否反注释return，结果顺序都是1 2 3 4。为什么会这样，与捕获和冒泡的关系呢？先说结论，直接点击同一个DOM，是处于目标阶段了，和捕获与冒泡无关了。可以看看这篇文章 你真的理解事件冒泡和事件捕获吗？

后面有三个问题，尤其是后两个，可以使你更深入理解这些概念：“需要注意的是，如果你还不明白为什么在c上触发的先是c1再是c2的话，那么你就需要在去看看第二个问题所描述的内容了”。

posted @ 2019-06-12 13:31  姜瑞涛  阅读(133)  评论(0)  编辑  收藏  举报