事件流

# 事件流

事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

# 两种事件流模型

# 事件冒泡

事件开始从最具体的事件目标一层层的向上传递到最不具体的事件目标。即从DOM树的叶子节点到根节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
</head>
<body>
    <div>
        <p>点我</p>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

上述代码，给p标签绑定点击事件的时候，事件的传播为：

p -> div -> body -> html -> document

# 事件捕获

事件开始从最不具体的事件目标一层层的向下传递到最具体的事件目标。即从DOM树的根节点到对应的叶子节点。

同样对照上面的代码，得到的结果和刚刚完全相反：

document -> html -> body -> div -> p

# DOM事件流

"DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件捕获阶段：实际目标<div>在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到<html>再到<body>就停止了。下图中为1~3.
处于目标阶段：事件在<div>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。
冒泡阶段：事件又传播回文档。

注意点：

尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标，但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两次机会在目标对象上面操作事件。
并非所有的事件都会经过冒泡阶段。所有的事件都要经过捕获阶段和处于目标阶段，但是有些事件会跳过冒泡阶段：如，获得输入焦点的focus事件和失去输入焦点的blur事件。

# 事件处理程序

响应某个事件的函数就叫做事件处理程序（事件监听器），事件处理器以on开头，如：click -> onclick、mouseover -> onmouseover

# 事件代理

传统的事件处理中，需要为每个元素添加事件处理程序。js事件代理则是一种简单有效的技巧，通过它可以把事件处理程序添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。

DOM2提供了两方法来让我们处理和删除事件处理程序的操作：addEventListener和removeEventListener。

btn.addEventListener(eventType, function () {
}, false);
//参数一为事件名
//参数二为事件处理程序
//参数三传入Boolean，true表示在事件捕获阶段调用事件处理程序，false为在事件冒泡阶段调用事件处理程序

1
2
3
4
5

# 原理

事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。关于target更多内容请参考javaScript事件（四）event的公共成员（属性和方法） (opens new window)

#html&css

最近更新时间： 2021/08/18 18:26:52