JS学习：了解事件冒泡和事件捕获

最新推荐文章于 2024-02-27 16:46:43 发布

hu_chuck

最新推荐文章于 2024-02-27 16:46:43 发布

阅读量243

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/u012465508/article/details/78796853

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一：事件冒泡

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <script type="application/javascript">
        window.onload = function(){
            var mydiv = document.getElementById("myDiv");
            mydiv.onclick = function(event){
                alert(1);
            };
            document.body.onclick = function(){
                alert(2);
            }
        }

    </script>
    <body>
        <div id="myDiv">Click me</div>
    </body>
</html>

如上代码，当我们点击div的时候，首先会出发div的点击事件，然后逐级向上传播，依次为body，html，document。因此会先弹出1，再弹出2。
冒泡过程
事件冒泡的过程如上图所示，但是在IE5.5及更早的版本之前冒泡会跳过html，直接从body到document。

二：事件捕获

与事件冒泡不同，事件捕获是不太确定的节点先接收到事件，具体的节点最后接收到事件。事件捕获的意义在于在事件到达预定目标之前捕获它。任然以前面的代码为例：点击div时会按document，html，body，div的顺序来触发click事件。因此会先输出2，再输出1。如下图所示：

三：阻止事件冒泡

DOM中阻止事件冒泡的方法是利用stopPropagation()方法。如之前的代码所示，如果我们要阻止事件网上冒泡，则需要重写刚才的js代码

var mydiv = document.getElementById("myDiv");
            mydiv.onclick = function(event){
                alert(1);
                event.stopPropagation();
            };
            document.body.onclick = function(){
                alert(2);
            }

这样当我们点击div的时候局只会弹出1，不会弹出2了。
然而在IE中并不能用stopPropagation()方法，在IE中我们只要设置cancelBubble为true即可。代码如下：

var mydiv = document.getElementById("myDiv");
            mydiv.onclick = function(){
                alert(1);
                window.event.cancelBubble = true;
            };
            document.body.onclick = function(){
                alert(2);
            }

四：阻止事件的默认行为

什么是事件的默认行为呢？在实际中，当我们点开一个a标签会跳转到href属性指定的url地址。当我们要阻止他进行跳转要怎么设置呢？假设我们有个id为myLink的a标签，在dom事件中我们通过preventDefault()方法来阻止事件的默认行为代码如下：

var link = document.getElementById("myLink");
            link.onclick = function(event){
                event.preventDefault();
            }

而在IE中我们通过设置returnValue属性为false来阻止默认行为。代码如下：

var link = document.getElementById("myLink");
            link.onclick = function(){
                window.event.returnValue = false;
            }

hu_chuck

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录