Js中级--事件捕获

最新推荐文章于 2024-04-17 11:31:34 发布

Wendy-lxq

最新推荐文章于 2024-04-17 11:31:34 发布

阅读量546

点赞数 1

分类专栏： JavaScript 文章标签： javascript web前端开发

本文链接：https://blog.csdn.net/u010297791/article/details/53572002

版权

JavaScript 专栏收录该内容

52 篇文章 3 订阅

订阅专栏

1、事件传播-冒泡与捕获

DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。

　默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。

W3C模型是将事件冒泡和事件捕获进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。

2、事件冒泡

具体的解析请详见 Js中级--事件冒泡。

当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。

3、事件捕获

事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。但是在不同的浏览器下这个事件捕获的函数不一样，具体解释如下：

1）标准
obj.addEventListener(evtype,fn,useCapture)——W3C提供的添加事件处理函数的方法。obj是要添加事件的对象，evtype是事件类型，不带on前缀，fn是事件处理函数，如果useCapture是true，则事件处理函数在捕获阶段被执行，否则在冒泡阶段执行。
obj.removeEventListener(evtype,fn,useCapture)——W3C提供的删除事件处理函数的方法。
2）IE

obj.attachEvent(evtype,fn)——IE提供的添加事件处理函数的方法。obj是要添加事件的对象，evtype是事件类型，带on前缀，fn是事件处理函数，IE不支持事件捕获。
obj.detachEvent(evtype,fn,)——IE提供的删除事件处理函数的方法，evtype包含on前缀。

简单解释：

（1）标准：obj.addEventListener(事件名称,事件函数,是否捕获)

1）有捕获

2）事件名称没有on

3）事件函数执行的顺序：正序

4）this触发该事件的对象

（2）IE：obj.attachEvent(事件名称,事件函数)

1）没有捕获

2）事件名称有on

3）事件函数执行的顺序：标准IE 正序非标准IE:倒序

首先看一实例，如下图是一个简单的界面原型。

我们想要实现的效果是：为div1、div2、span1加上border边框。

添加的事件如下：

 <script>
        window.οnlοad= function () {
            var oDiv1 = document.getElementById("div1");
            var oDIv2 = document.getElementById("div2");
            var oSpan = document.getElementById("span1");

            oSpan.addEventListener("click", function () {
                this.style.border="5px solid red";
                alert("red");

            },true)
            oDIv2.addEventListener("click", function () {
                this.style.border="5px solid blue";
                alert("blue");
            },true)

            oDiv1.addEventListener("click", function () {
                this.style.border="5px solid black";
                alert("black");
            },true)
        };
    </script>

结果分析：当我们点击span时，依次弹出”black“,"blue","red"。这个就是事件的捕获。如果把addEventListener方法的第三个参数改成false，则表示只在冒泡的阶段触发，弹出的依次为：”red“,"blue","black"，即为事件冒泡。

效果图：

事件捕获的示意图如下：

参考代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件捕获</title>
    <style>
        #div1{
            width: 300px;
            height: 300px;
            background-color: green;
            border: 1px solid green;
            margin:50px auto;
        }
        #div2{
            width: 250px;
            height: 250px;
            background-color: yellow;
            border: 1px solid yellow;
            margin:10px auto;
        }
        #span1{
            width: 200px;
            height: 200px;
            display: block;
            text-align: center;
            line-height:200px;
            background-color: #c0c0c0;
            margin:10px auto;
            
        }
    </style>
    <script>
        window.οnlοad= function () {
            var oDiv1 = document.getElementById("div1");
            var oDIv2 = document.getElementById("div2");
            var oSpan = document.getElementById("span1");

            oSpan.addEventListener("click", function () {
                this.style.border="5px solid red";
                alert("red");

            },false)
            oDIv2.addEventListener("click", function () {
                this.style.border="5px solid blue";
                alert("blue");
            },false)

            oDiv1.addEventListener("click", function () {
                this.style.border="5px solid black";
                alert("black");
            },false)
        };
    </script>
</head>
<body>
<div id="div1">div1
    <div id="div2">div2
        <span id="span1">这是span1.</span>
    </div>
</div>

</body>
</html>

Wendy-lxq

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js中级--事件捕获

1、事件传播-冒泡与捕获 DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。　默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。W3C模型是将事件冒泡
复制链接

扫一扫

专栏目录