事件捕获与冒泡的再探

Posted 2022-01-04 zhansu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件捕获与冒泡的再探相关的知识，希望对你有一定的参考价值。

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

<!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的话，那么你就需要在去看看第二个问题所描述的内容了”。

以上是关于事件捕获与冒泡的再探的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript---事件冒泡事件捕获