解析：浏览器事件冒泡及事件捕获

最新推荐文章于 2024-07-25 08:06:37 发布

C860

最新推荐文章于 2024-07-25 08:06:37 发布

阅读量3.6k

点赞数

分类专栏：浏览器文章标签：浏览器

本文链接：https://blog.csdn.net/c860_zy/article/details/20381773

版权

浏览器专栏收录该内容

14 篇文章 0 订阅

订阅专栏

今天的效率有点奇葩，说高吧，一个上午做了不少事。说低吧，因为一个分布式的算法花了我不少时间，终于有点头绪。估计明天会写一篇文章来讲述一下自己的看法。

而今天，还是回到前端。今天来说说事件冒泡和事件捕获。首先肯定是概念：什么是事件冒泡？什么是事件捕获？

简单地说，事件冒泡和事件捕获都是一种事件传递的机制。这种机制可以使事件在不同级的元素间传递。事件冒泡是从事件触发的源节点，向父节点传递，直到到达最顶节点。而事件捕获则是从最顶节点，逐步向下传递，直到到达事件触发的源节点。

在一些标准的浏览器中，如Chrome、Firefox等，支持这两种冒泡方式。而事实上，准确的说，是这两种方式的混合方式。因为W3C采取的就是这两种方式的结合：先从顶级节点开始，将事件向下传递至源节点，再从源节点冒泡至顶节点。

而在IE及Opera（以下说的都是老版本的欧朋，新版本的欧朋经检测是支持事件捕获的）下，是不支持事件捕获的。而这个特点最明显体现在事件绑定函数上。

IE、Opera的事件绑定函数是attachEvent，而Chrome等浏览器则是addEventListener，而后者比前者的参数多了一个——这个参数是一个布尔值，这个布尔值由用户决定，用户若设为true，则该绑定事件以事件捕获的形式参与，若为false则以事件冒泡的形势参与。而这个参数在IE和Opera浏览器中是不存在的——根本原因是它们不支持事件捕获。

下面我来提供一个例子让大家更好地理解事件冒泡和事件捕获(本来想用flex布局，后来想偷懒，所以还是算了，大家不要注意细节(*^__^*) 嘻嘻……)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            margin: 0 auto;
        }
        #ele1 {
            width: 500px;
            height: 500px;
            background: green;
            line-height: 500px;
            text-align: center;
        }
        #ele2 {
            width: 300px;
            height: 300px;
            line-height: 300px;
            background: blue;
            text-align: center;
            display: inline-block;
            vertical-align: middle;
        }
        #ele3 {
            width: 200px;
            height: 200px;
            background: red;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div id="ele1">
        <div id="ele2">
            <div id="ele3"></div>
        </div>
    </div>
    <a id="test" href="http://baidu.com/">click</a>
    <script type="text/javascript">
        window.onload = function() {
            var e1 = document.getElementById('ele1');
            var e2 = document.getElementById('ele2');
            var e3 = document.getElementById('ele3');
            var link = document.getElementById('test');
            e1.addEventListener('click',function(evt) {
                console.log('ele1-click');
            },true);
            e2.addEventListener('click',function(evt) {
                console.log('ele2-click');
            });
            e3.addEventListener('click',function(evt) {
                console.log('ele3-click');
                evt.stopPropagation();
            });
            link.addEventListener('click',function(evt) {
                console.log('^_^，I have stopped it!')
                evt.preventDefault();
            });
        };
    </script>
</body>
</html>

可以留意到，我在例子中还增加了一个preventDefault的例子，因为我看到网上许多文章都把它和stopPropagation放在一起讨论，所以这里也让大家了解一下。

C860

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
解析：浏览器事件冒泡及事件捕获

今天的效率有点奇葩，说高吧，一个上午做了不少事。说低吧，因为一个分布式的算法花了我不少时间，终于有点头绪。估计明天会写一篇文章来讲述一下自己的看法。而今天，还是回到前端。今天来说说事件冒泡和事件捕获。首先肯定是概念：什么是事件冒泡？什么是事件捕获？简单地说，事件冒泡和事件捕获都是一种事件传递的机制。这种机制可以使事件在不同级的元素间传递。事件冒泡是从事件触发的源节点，向父节
复制链接

扫一扫