JavaScript（六）：事件捕获与冒泡

最新推荐文章于 2023-08-25 16:15:59 发布

欧阳方超

最新推荐文章于 2023-08-25 16:15:59 发布

阅读量478

点赞数 1

分类专栏： JavaScript 前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/u012288582/article/details/126908174

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

事件捕获与冒泡

1、概述
2、事件传播
3、总结

1、概述

大家好，我是欧阳方超。题图为某日去医院，愿大家健康。
用户在操作浏览器的过程中，会发生各种各样的事件，本次就聊一聊事件的传播机制。

2、事件传播

2.1、事件冒泡

先看一个简单的例子，代码如下：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="container">
            <div id="outer" onclick="outerHandler()">outer
                <div id="outer" onclick="innerHandler()">inner</div>
            </div>
        </div>

        <script type="text/javascript">
            function outerHandler() {
                console.log("outer clicked");
            }
            function innerHandler() {
                console.log("inner clicked");
            }
        </script>
    </body>
    
</html>

当在inner点击时，inner元素的点击事件处理函数和outer元素的点击事件处理函数都会执行，而且inner的先执行outer的后执行；
在这里插入图片描述
当点击outer时，只有outer元素的点击事件处理函数得到执行，

以上现象，点击inner时，点击事件看起来是发生在该元素上，但是默认状态下，inner上的点击事件处理函数执行后，随后，点击事件会像水底的气泡一样往上传递给嵌套它的outer元素，这称为“事件冒泡”。
在上面的代码中并没有过多的“修饰”成分，可见事件冒泡是默认行为。

2.2、事件捕获

事件捕获与事件冒泡的设计理念相反，即使点击最内层的元素，事件依然是从最高级的祖先元素向内层的元素逐个传递，在这过程中，如果某个元素上的事件处理函数被设置为发捕获模式，则函数将会被执行。那么如何设置捕获模式呢，可以使用addEventListener()函数进行设置，

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="container">
            <div id="outer">outer
                <div id="inner">inner</div>
            </div>
        </div>

        <script type="text/javascript">
            document.getElementById("outer").addEventListener('click', function() {
                console.log("outer clicked");
            }, true);
            document.getElementById("inner").addEventListener('click', function() {
                console.log("inner clicked");
            });
        </script>
    </body>
    
</html>

以上代码，在点击inner元素时，事件会从最高级的祖先往内层元素上传递，所以outer元素上点击事件处理器会先得到执行，接着事件到达inner元素时再执行其上的点击事件处理器，于是执行时的结果如下：
在这里插入图片描述
标准的DOM事件描述了事件传播的三个阶段，依次为：
1、捕获阶段，事件从到最高级最先元素依次向下传播；
2、目标阶段，事件到达目标元素；
3、冒泡阶段，事件从目标元素上依次往最高级元素传播；
所以当inner元素上有事件发生时，以上面代码为例，它的传播过程是这样的，从Window到Document，再到< html>，再到< body>，再到< div id=“container”>，再到< div id=“outer”>，这是第一阶段，即捕获阶段；接着事件到达再到< div id=“inner”>，这是第二阶段，即目标阶段；然后事件再经历与捕获阶段相反的传播过程，< div id=“outer”>、< div id=“container”>、< body>、< html>、Document、Window，即冒泡阶段。

2.2.1、addEventListener

addEventListener()方法可以为指定元素添加事件处理器，该函数常用的形式为：element.addEventListener(event, function, useCapture)，
参数说明

参数	描述
event	必须，表示事件的名称，不要使用on前缀，如点击事件要写成click而不是onclick
function	必须，事件发生时要执行的函数
useCapture	选填，默认值为false。可选值有true、false两种，true表示所添加的事件处理器在捕获阶段执行，false表示所添加的事件处理器在冒泡阶段执行

3、总结

事件冒泡是微软提出的传播机制，事件捕获是网景提出的事件传播机制，现代浏览器默认以冒泡形式传播；为了尽可能做到兼容，W3C采取的一种折中的办法，并形成了一种统一标准，即element.addEventListener(event, function, useCapture)函数，并且通过第三个参数useCapture来控制相关事件处理器是在捕获阶段还是冒泡阶段执行，该标准既包含了事件捕获又包括事件冒泡，并且事件捕获发生在事件冒泡之前。
我是欧阳方超，把事情做好了自然就有兴趣了，如果你喜欢我的文章，欢迎点赞、转发、评论加关注。

欧阳方超

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（六）：事件捕获与冒泡

事件冒泡是微软提出的传播机制，事件捕获是网景提出的事件传播机制，现代浏览器默认以冒泡形式传播；为了尽可能做到兼容，W3C采取的一种折中的办法，并形成了一种统一标准，即element.addEventListener(event, function, useCapture)函数，并且通过第三个参数useCapture来控制相关事件处理器是在捕获阶段还是冒泡阶段执行
复制链接

扫一扫

专栏目录