码迷,mamicode.com
首页 > 其他好文 > 详细

事件捕获与冒泡的再探

时间:2019-06-12 13:54:14      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:lan   return   can   内容   elb   文章   har   事件   idt   

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

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

事件捕获与冒泡的再探

标签:lan   return   can   内容   elb   文章   har   事件   idt   

原文地址:https://www.cnblogs.com/zhansu/p/11009076.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!