DOM中的事件 Event
Event 接口表示在 DOM 中出现的事件。
Event（事件）可以由三种方式触发：
- 由用户触发动作，例如鼠标或键盘事件
- 由 API 生成，例如指示动画已经完成运行的事件，视频已被暂停等
- 通过脚本代码触发，例如对元素调用
HTMLElement.click()方法，或者定义一些自定义事件，再使用EventTarget.dispatchEvent()方法将自定义事件派发往指定的目标（target）
有许多不同类型的事件，其中一些使用基于 Event 主接口的二次接口。Event 本身包含适用于所有事件的属性和方法。
很多DOM元素可以被设计接收（或者监听) 这些事件, 并且执行代码去响应（或者处理）它们。通过 EventTarget.addEventListener() 方法可以将事件处理函数绑定到不同的HTML elements上 (比如<button>, <div>, <span>等等) 。这种绑定事件处理函数的方式基本替换了老版本中使用 HTML event handler attributes（例如 HTMLElement.onclick = ... ） 来绑定事件处理函数的方式。除此之外，通过正确使用 removeEventListener() 方法，这些事件处理函数也能被移除。
Event 的属性和方法
Event的属性
| 属性名 | 是否只读 | 类型 | 作用 |
|---|---|---|---|
| bubbles | 只读 | boolean | 表示该事件是否会在 DOM 中冒泡 |
| cancelable | 只读 | boolean | 表示事件是否可以取消 |
| composed | 只读 | boolean | 表示事件是否可以穿过 Shadow DOM 和常规 DOM 之间的隔阂进行冒泡 |
| defaultPrevented | 只读 | boolean | 表示 event.preventDefault() 方法是否取消了事件的默认行为 |
| eventPhase | 只读 | 0｜1｜2｜3，含义见下表 | 表示事件流正被处理到了哪个阶段 |
| currentTarget | 只读 | EventTarget类型 | 标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素 |
| target | 只读 | EventTarget类型 | 触发事件的元素 |
| timeStamp | 只读 | DOMHighResTimeStamp类型(double) | 事件创建时的时间戳（精度为毫秒） |
| type | 只读 | string | 表示该事件对象的事件类型 |
| isTrusted | 只读 | boolean | 表示事件是由浏览器（例如用户点击）发起的（true），还是由脚本（使用事件创建方法）发出的（false） |
eventPhase 的类型如下：
| 常量 | 值 | 描述 |
|---|---|---|
| Event.NONE | 0 | 这个时间，没有事件正在被处理 |
| Event.CAPTURING_PHASE | 1 | 事件正在被目标元素的祖先对象处理. 这个处理过程从 Window 开始，然后 Document , 然后是 HTMLHtmlElement , 一直这样，直到目标元素的父元素。 通过 EventTarget.addEventListener() 注册为捕获模式的 Event listeners 被调用。 |
| Event.AT_TARGET | 2 | 事件对象已经抵达 the event’s target . 为这个阶段注册的事件监听被调用。 如果 Event.bubbles 的值为 false , 对事件对象的处理在这个阶段后就会结束. |
| Event.BUBBLING_PHASE | 3 | 事件对象逆向向上传播回目标元素的祖先元素, 从父亲元素开始，并且最终到达包含元素 Window . 这就是冒泡，并且只有 Event.bubbles 值为 true 的时候才会发生。 为这个阶段注册的 Event listeners 在这个过程中被触发. |
Event的方法
| 方法名 | 作用 |
|---|---|
| composedPath() | 返回事件的路径（将在该对象上调用监听器）。 如果阴影根节点 (shadow root) 创建时 ShadowRoot.mode 值为 closed，那么路径不会包括该根节点下阴影树 (shadow tree) 的节点 |
| preventDefault() | 取消事件（如果该事件可取消） |
| stopPropagation() | 停止冒泡，阻止事件在 DOM 中继续冒泡 |
| stopImmediatePropagation() | 对这个特定的事件而言，其他监听器停止被调用。 这个事件既不会添加到相同的元素上，也不会添加到以后将要遍历的元素上（例如在捕获阶段） |
