Event - 表示在 DOM 中发生的事件

Event 接口表示在 DOM 中发生的事件。

事件可以由用户操作触发，例如单击鼠标按钮或敲击键盘，也可以由 API 生成以表示异步任务的进度。也可以通过编程方式触发，例如通过调用元素的 HTMLElement.click() 方法，或通过定义事件，然后使用 EventTarget.dispatchEvent() 将其发送到指定的目标。

事件的类型很多，其中一些基于主要的 Event 接口使用其他接口。Event 本身包含所有事件共有的属性和方法。

可以将许多 DOM 元素设置为接受（或 “监听”）这些事件，并执行代码以响应（处理）这些事件。通常使用 EventTarget.addEventListener() 将事件处理程序连接（或 “附加”）到各种 HTML 元素（例如 <button>，<div>，<span> 等），并且通常使用旧的 HTML 事件来代替处理程序属性。此外，在正确添加后，如果需要，还可以使用 removeEventListener() 断开此类处理程序的连接。

注意： 一个元素可以具有多个这样的处理程序，即使对于完全相同的事件也是如此 - 特别是如果将单独的独立代码模块附加在一起，则每个模块都具有自己的独立用途。 （例如，一个带有广告模块和统计模块的网页都在监听视频观看事件。）

如果有许多嵌套元素，每个元素都有其自己的处理程序，则事件处理可能会变得非常复杂 - 特别是在父元素与子元素接收的事件相同的情况下，因为它们在空间上重叠，因此从技术上讲，这两个事件均会发生，此类事件的处理顺序取决于所触发的每个处理程序的事件冒泡和捕获设置。

基于 Event 的接口

以下是基于 Event 主界面的接口列表，并提供了 API 参考中其各自文档的链接。

请注意，所有事件接口的名称都以 “Event” 结尾。

• AnimationEvent
• AudioProcessingEvent
• BeforeInputEvent
• BeforeUnloadEvent
• BlobEvent
• ClipboardEvent
• CloseEvent
• CompositionEvent
• CSSFontFaceLoadEvent
• CustomEvent
• DeviceLightEvent
• DeviceMotionEvent
• DeviceOrientationEvent
• DeviceProximityEvent
• DOMTransactionEvent
• DragEvent
• EditingBeforeInputEvent
• ErrorEvent
• FetchEvent
• FocusEvent
• GamepadEvent
• HashChangeEvent
• IDBVersionChangeEvent
• InputEvent
• KeyboardEvent
• MediaStreamEvent
• MessageEvent
• MouseEvent
• MutationEvent
• OfflineAudioCompletionEvent
• OverconstrainedError
• PageTransitionEvent
• PaymentRequestUpdateEvent
• PointerEvent
• PopStateEvent
• ProgressEvent
• RelatedEvent
• RTCDataChannelEvent
• RTCIdentityErrorEvent
• RTCIdentityEvent
• RTCPeerConnectionIceEvent
• SensorEvent
• StorageEvent
• SVGEvent
• SVGZoomEvent
• TimeEvent
• TouchEvent
• TrackEvent
• TransitionEvent
• UIEvent
• UserProximityEvent
• WebGLContextEvent
• WheelEvent

构造函数

Event()

创建一个 Event 对象，并将其返回给调用者。

属性

Event.bubbles 只读

一个布尔值，指示事件是否在 DOM 中冒泡。

Event.cancelBubble

Event.stopPropagation() 的历史别名。从事件处理程序返回之前将其值设置为 true 可以防止事件传播。

Event.cancelable 只读

一个布尔值，表示事件是否可取消。

Event.composed 只读

一个布尔值，表示事件是否可以在影子 DOM 和常规 DOM 之间的边界上冒泡。

Event.currentTarget 只读

对事件的当前注册目标的引用。这是该事件当前要发送到的对象。它很有可能在_重新定位_的过程中发生变化。

Event.deepPath

一个 Array，表示事件冒泡的 DOM Node。

Event.defaultPrevented 只读

表示是否调用了 event.preventDefault() 来取消了该事件。

Event.eventPhase 只读

表示正在处理事件流的哪个阶段。

Event.explicitOriginalTarget 只读

事件的显式原始目标（仅限于 Mozilla。）

Event.originalTarget 只读

没有任何重新定向之前事件的原始目标。（仅限于 Mozilla。）

Event.returnValue

Internet Explorer 引入的历史属性，最终被 DOM 规范采用，以确保现有站点继续运行。理想情况下，您应尝试使用 Event.preventDefault() 和 Event.defaultPrevented。但是如果需要，您可以使用 returnValue 。

Event.srcElement

Event.target 的非标准别名（来自旧版本的 Microsoft Internet Explorer）。出于网络兼容性目的，其他一些浏览器也开始支持它。

Event.target 只读

事件最初发送到的目标。

Event.timeStamp 只读

创建事件的时间（以毫秒为单位）。按照规范，该值是自纪元以来的时间 - 但实际上，浏览器的定义会有所不同。另外，目前规范正在进行将其更改为 DOMHighResTimeStamp。

Event.type 只读

事件的名称。不区分大小写。

Event.isTrusted 只读

表示事件是由浏览器（例如，在用户单击之后）还是由脚本（使用事件创建方法，例如 Event.initEvent）启动的。

废弃的属性

Event.scoped 只读

一个 Boolean，指示给定事件是否会通过影子根冒泡进入标准 DOM。使用 composed 代替。

方法

Event.composedPath()

返回事件的路径（将在其上调用侦听器的对象）。如果影子根是在 ShadowRoot.mode 处于关闭状态下创建的，则这不包括影子树中的节点。

Event.preventDefault()

取消事件（如果可以取消）。

Event.stopImmediatePropagation()

对于此特定事件，请阻止所有其他侦听器被调用。这包括附加到同一元素的监听器，以及附加到稍后将遍历的元素的监听器（例如，在捕获阶段）。

Event.stopPropagation()

阻止事件在 DOM 中进一步传播。

废弃的方法

Event.createEvent()

创建一个新事件，然后必须通过调用其 initEvent() 方法对其进行初始化。

Event.initEvent()

初始化创建的事件的值。如果事件已被调度，则此方法不执行任何操作。

Event.getPreventDefault()

返回 Event.defaultPrevented 的值。

Event.preventBubble()

防止事件冒泡。请改用 event.stopPropagation。

Event.preventCapture()

防止事件冒泡。请改用 event.stopPropagation。

规范

规范	状态	备注
DOM Event 的定义	现行的标准	-

桌面浏览器兼容性

移动浏览器兼容性

1. 根据规范讨论，从 Chrome 58 和 Opera 45 开始，将此属性设置为 false 不会执行任何操作。

2. 在 Firefox 53 之前，此属性是在 UIEvent 接口上定义的。有关更多详细信息，请参见 bug 1298970 。

3. 根据规范讨论，从 Samsung Internet 7.0 和 Opera 45 开始，将此属性设置为 false 不会执行任何操作。

4. 通过 deepPath 支持。

5. 在 Internet Explorer 6 到 8 中，事件模型是不同的。事件侦听器附带有非标准的 EventTarget.attachEvent 方法。在此模型中，没有等效于 event.currentTarget 的对象， this是全局对象。模拟 event.currentTarget 功能的一种解决方案是将处理程序包装在使用 Function.prototype.call 并将处理程序作为第一个参数的调用处理程序的函数中。这样，this 将是期望值。

6. 参见 bug 691151。

7. 在 Firefox 17 之前，在事件分配后调用此方法会引发异常，而不是什么也不做。

8. 从 Chrome 53 和 Opera 40 开始，不受信任的事件不会调用默认操作。

9. 在 Internet Explorer 中，除 createEvent() 方法创建的事件外，所有事件均受信任。

10. 从 Samsung Internet 6.0 和 Opera 40 开始，不受信任的事件不会调用默认操作。

11. 从版本 53 开始，不受信任的事件不会调用默认操作。

12. 暂时在 63 中添加，在 64 中删除，在 65 中短暂添加，然后在解决相关兼容性问题时再次删除（请参阅 bug 1520756）。

13. 从 Chrome 49，Firefox 54 和 Opera 36 开始，此属性返回 DOMHighResTimeStamp 而不是 DOMTimeStamp。

14. 从 Samsung Internet 5.0，Firefox 54 和 Opera 36 开始，此属性返回 DOMHighResTimeStamp 而不是 DOMTimeStamp。

15. 从版本 49 开始，此属性返回 DOMHighResTimeStamp 而不是 DOMTimeStamp。

相关链接

• 事件目标比较 (target vs currentTarget vs relatedTarget vs originalTarget)
• 创建和触发自定义事件