事件传播三阶段

407指导员

于 2020-11-11 17:31:53 发布

阅读量311

点赞数

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

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109627484

版权

javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

事件的传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的传播</title>
    <style>
        #box1 {
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }

        #box2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        #box3 {
            height: 150px;
            width: 150px;
            background-color: skyblue;
        }
    </style>
    <script>
        window.onload = function () {
            //为三个div绑定单击响应函数
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            var box3 = document.getElementById("box3");
            /**
             * 事件的传播
             *      -微软公司认为事件应该是由内而外触发的，应该先触发当前元素上的事件
             * 然后再向祖先传播。也就是说事件应该在冒泡阶段执行
             *      -网景公司认为事件应该由外向内传播的，应该先触发外层的祖先元素事件
             * 然后再向内传播给后代元素，也就是说事件在捕获阶段执行
             *      -W3C综合了两个公司的方案，将事件传播分成了三个阶段
             *          1.捕获阶段。
             *              -在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，             *               但是默认此时不会触发事件。
             *           2.目标阶段。
             *              -事件捕获到目标元素，捕获结束开始在目标元素上触发事件
             *           3.冒泡阶段
             *              -事件从目标元素向其祖先元素传递，依次触发祖先元素上的事件
             *           -如果希望在捕获阶段就触发事件，可以将addEventListener()第三个                          参数设置为true,一般为false
             *      -ie8及以下浏览器没有捕获阶段。
             */
            blind(box1, "click", function () {
                alert("我是box1的单击响应函数")
            });
            blind(box2, "click", function () {
                alert("我是box2的单击响应函数")
            });
            blind(box3, "click", function () {
                alert("我是box3的单击响应函数")
            });

            function blind(obj, eventStr, callback) {
                if (obj.addEventListener) {
                    //大部分浏览器兼容的方式
                    obj.addEventListener(eventStr, callback, true);
                } else {
                    //ie8及以下浏览器
                    obj.attachEvent("on" + eventStr, function () {
                        callback.call(obj);
                    });
                }

            }

        };

    </script>
</head>
<body>
<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
</body>
</html>

注意点:

1.之前学了事件的冒泡，在这里我们知道事件冒泡只是事件传递第三阶段。

2.捕获阶段触发事件就是你祖先先响应，点孙子，你爷爷先响应，然后你爸，最后才是你，不太合理。

3.如果想捕获阶段执行，使用addEventListener(eventStr, callback, true)，第三个参数设置为true，一般是false.

4.ie8及以下不支持。

407指导员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件传播三阶段

事件的传播<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件的传播</title> <style> #box1 { width: 300px; height: 300px; background-color: yello
复制链接

扫一扫

专栏目录