浏览器基础（1）-事件机制

最新推荐文章于 2024-07-01 09:03:48 发布

菜鸡前端进阶

最新推荐文章于 2024-07-01 09:03:48 发布

阅读量728

点赞数

分类专栏：浏览器基础文章标签： javascript html html5 css3 es6

本文链接：https://blog.csdn.net/weixin_42370640/article/details/105206082

版权

本文详细介绍了浏览器事件的触发三阶段：捕获阶段、目标阶段和冒泡阶段，并通过示例解释了addEventListener方法的事件注册，以及事件代理的概念和优点。通过对事件机制的理解，有助于优化JavaScript代码的性能。

摘要由CSDN通过智能技术生成

事件机制

事件触发三阶段

事件触发三个阶段分别是捕获阶段、目标阶段、冒泡阶段，我们先来看一张图。
在这里插入图片描述
我们可以看到捕获阶段(Capture Phase)是从window节点开始的，通过DOM树传播到达注册事件的节点上（此处为蓝色的td），此时将会触发事件，这一阶段称为目标阶段（Target Phase）。事件在目标节点上触发后，不会终止，会一层层向上冒，最终回溯到window节点。这一阶段我们称之为冒泡阶段（Bubbling Phase）。现在我们可以来总结一下。

捕获阶段

事件从window节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。

目标阶段

事件到达目标节点时，事件将会在目标节点上被触发。

冒泡阶段

事件在目标节点上触发后，不会终止，会一层层向上冒，最终回溯到window节点。

事件触发三阶段告一段落，我们来思考以下问题：

是不是所有事件都会有冒泡阶段？
捕获阶段有什么用？
在有些情况下我们并不希望捕获和冒泡阶段中当前事件的进一步传播，那么如何阻止捕获和冒泡？

事件的注册

在 DOM 事件模型中，通过调用对象的 addEventListener() 方法注册事件。使用改方法能够为多个对象注册相同的事件处理函数，也可以为同一个对象注册多个事件处理函数。为同一个对象注册多个事件处理函数对于模块化开发非常有用。

addEventListener

语法

target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);

参数

type:表示监听事件类型的字符串。
listener:当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。
options(可选):一个指定有关 listener 属性的可选参数对象。
useCapture(可选)：对于布尔值 useCapture 参数来说，该参数默认值为 false ，useCapture 决定了注册的事件是捕获事件还是冒泡事件。false(冒泡事件),true(捕获事件)。

接下来我们看一个例子

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <ul>
        <li>
            <a href=