javascript 事件的捕获和冒泡

最新推荐文章于 2022-08-21 11:30:18 发布

doubleicon

最新推荐文章于 2022-08-21 11:30:18 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签：冒泡捕获 javascript事件

本文链接：https://blog.csdn.net/u011872945/article/details/27701377

版权

JavaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1、说明
对于“捕获"与"",我们可能对冒泡更熟悉一些，因为在所有的浏览器中，都支持事件冒泡，即事件由子元素向祖先元素传播，
如气泡从水底向水面上浮一样，而在firefox,chrome这种标准的浏览器中，事件传播还有一个阶段，那就是捕获阶段，这个很少有人用，所以常常被人疏忽，
捕获就是与冒泡完全相反的过程，即事件有祖先元素，向子元素传播，如同将一个石子从水面沉到水底一样，但是在IE,opera浏览器中，是不存在这个阶段的，

这个可以从各个浏览器提供的注册事件监听方法中可知(具体的可以去了解注册事件监听)

测试代码如下：

<span style="font-family:Comic Sans MS;font-size:12px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    
</head>
<body>

    <div id="obj_level0" style="height:100px;background-color:green;">
        <h2>第一层</h2>
        <div id="obj_level1_0" style="background-color:gray;">
            <h2>第二层</h2>
            <div id="obj_level2_0" style="position:absolute;left:100px;top:150px;background-color:blue;width:300px;height:100px;">
                <h2>第三层</h2>
            </div>
        </div>
        <div id="obj_level1_1" style="background-color:darkgreen;margin-top:200px;height:60px;">
            <h2>第二层-元素二</h2>

        </div>
    </div>
    <script type="text/javascript">
        //绑定事件
        function bindEvent(elem, type, fn) {
            if (elem.attachEvent) {
                var typeRef = "_" + type;
                if (!elem[typeRef]) {
                    elem[typeRef] = [];
                }
                for (var i in elem[typeRef]) {
                    if (elem[typeRef][i] == fn) {
                        return;
                    }
                }
                elem[typeRef].push(fn);
                elem["on" + type] = function () {
                    for (var i in this[typeRef]) {
                        this[typeRef][i].apply(this, arguments);
                    }
                }
            } else {
                elem.addEventListener(type, fn, false);//false冒泡，true 捕获
            }
        }
        //移除事件绑定
        function removeEvent(elem, type, fn) {
            if (elem.detachEvent) {
                if (elem["_" + type]) {
                    for (var i in elem["_" + type]) {
                        if (elem["_" + type][i] == fn) {
                            elem["_" + type].splice(i, 1);
                            break;
                        }
                    }
                }
            } else {
                elem.removeEventListener(type, fn, false);
            }
        }

        var divs = document.getElementsByTagName("div");
        var count = 1;
        for (var i = 0; i < divs.length; i++) {
            bindEvent(divs[i], "click", function () {
                var obj = document.createTextNode("->" + count++);
                this.getElementsByTagName("h2")[0].insertBefore(obj, null);
            });
        }

    </script>
    

</body>
</html></span>

在实例中，我们注册事件监听默认发生在冒泡阶段，第一层，第二层，第三层有嵌套关系，
为了更好的测试冒泡，我们首先点击第三层，会看到在各个浏览器中的效果是一致的，说明所有的浏览器都支持冒泡
另外事件冒泡与视觉上的布局没有任何关系，这个冒泡仅仅依赖于dom元素的html结构，浏览器演示效果如下：

说完了冒泡，我们下面说捕获，将代码中的
elem.addEventListener(type, fn, false);//false冒泡，true 捕获,修改为true，就变成了捕获，
捕获需要在firefox，chrome浏览器下运行，查看效果，同上面一样，点击第三层查看效果，效果图如下：

doubleicon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javascript 事件的捕获和冒泡

1、说明对于“捕获"与"",我们可能对冒泡更熟悉一些，因为在所有的浏览器中，都支持事件冒泡，即事件由子元素向祖先元素传播，如气泡从水底向水面上浮一样，而在firefox,chrome这种标准的浏览器中，事件传播还有一个阶段，那就是捕获阶段，这个很少有人用，所以常常被人疏忽，捕获就是与冒泡完全相反的过程，即事件有祖先元素，向子元素传播，如同将一个石子从水面沉到水底一样，但是在IE,ope
复制链接

扫一扫