JS 你对DOM事件了解多少？尘封的记忆是否打开

什么是事件

事件是在页面上可以被 JavaScript 侦测到的行为。JavaScript和HTML之间的交互是通过事件实现的。

注意：事件通常与函数配合使用，当事件发生时函数才会执行。响应某个事件的函数就是事件处理程序(事件侦听器)。

如何注册事件函数

1. 通过 “on + 相应事件” 的方式直接绑定到相应的 html 上的事件。

1. 添加：div.onclick = function (){ ... };
2. 去除：div.onclick = null;

不存在兼容性问题，只能注册一个事件函数

1. 通过事件操作函数指定和删除事件处理程序的操作：

1. addEventListener()
2. removeEventListener()

函数均有3个参数：

第一个参数是要处理的事件类型

第二个参数是作为事件处理程序的函数

第三个参数是一个 boolean 值，默认 false 表示使用冒泡机制，true 表示捕获机制。

可以注册多个事件函数，执行顺序按照注册顺序；去除事件时只能去除非匿名函数

事件流

事件流描述的是从页面各元素中接受事件的顺序。也称为事件传播机制。

1. 捕获阶段：事件对象通过目标的祖先从窗口传播到目标的父级。此阶段也称为捕获阶段。
2. 目标阶段：事件对象到达事件对象的事件目标。此阶段也称为目标阶段。如果事件类型指示事件不冒泡，则事件对象将在完成此阶段后暂停。
3. 冒泡阶段：事件对象以相反的顺序在目标的祖先中传播，从目标的父级开始，以 Window 结束。