DOM 事件
事件的触发用于通知“对变化感兴趣”的代码以影响代码的执行。这些事件可能来自用户的交互(例如:使用鼠标或调整窗口大小)、底层环境状态的改变(例如:电池电量不足或操作系统的媒体事件)和其他的情况。
每个事件都使用继承自 Event 接口的对象来表示,可以包括额外的自定义成员属性及函数,以获取事件发生时相关的更多信息。本文为每个事件都提供了一个表格(靠近顶部的区域),其中包含了指向相关事件接口的链接和其他相关的信息。事件 > 基于 Event 的接口中完整地列出了不同的事件类型。
本文提供了你可能感兴趣的主要事件类型(动画、剪切板、worker 等等)的索引,以及实现这些事件的主要的类。
事件索引
| 事件类型 | 描述 | 文档 |
|---|---|---|
| 动画 |
与 Web Animation API 相关的事件。 用于响应动画状态的改变(例如:动画的开始或结束)。 |
在
Document、Window、HTMLElement 上触发的事件。
|
| 异步数据获取 | 与数据获取相关的事件。 |
在
AbortSignal、XMLHttpRequest、FileReader 上触发的事件。
|
| 剪切板 |
与 Clipboard API 相关的事件。 用于在内容被剪切、复制或粘贴时发出通知。 |
在
Document、Element、Window 上触发的事件。
|
| 合成(Composition) |
与文本输入相关的事件;“间接”输入文本(而不是直接使用常规的键盘输入)。 例如,使用语音转文字的引擎,或使用特殊的组合键以将键入的内容表示成另一种语言中的字符。 |
在
Element 上触发的事件。
|
| CSS 过渡 |
与 CSS 过渡相关的事件。 当 CSS 过渡开始、停止或取消等事件发生时发出通知。 |
在
Document、HTMLElement、Window 上触发的事件。
|
| 数据库 |
与数据库操作相关的事件:打开、关闭、事务、错误,等等。 |
在
IDBDatabase、IDBOpenDBRequest、IDBRequest、IDBTransaction 上触发的事件。
|
| DOM 突变 |
与文档对象模型(DOM)层次结构和节点的修改相关的事件。 |
警告: 突变事件已被弃用。请使用 MutationObserver 代替。 |
| 拖放、滚轮 |
与使用 HTML 拖放 API 和滚轮事件相关的事件。 拖动和滚轮事件派生自鼠标事件。虽然它们在使用鼠标滚轮和拖放时触发,但它们也可以和其他合适的硬件一起使用。 |
拖放事件在
滚轮事件在
|
| 焦点 | 与元素获得和失去焦点相关的事件。 |
在
Element、Window 上触发的事件。
|
| 表单 |
与创建、重置和提交表单相关的事件。 |
在
HTMLFormElement 上触发。
|
| 全屏 |
与 Fullscreen API 相关的事件。 用于在全屏和窗口模式切换或切换期间发生错误时发送通知。 |
在
Document、Element 上触发的事件。
|
| 游戏手柄(Gamepad) |
与 Gamepad API 相关的事件。 |
在
Window 上触发的事件。
|
| 手势 |
建议使用 Touch 事件来实现手势。 |
此外还有一些非标准的手势事件:
|
| History |
与 History API 相关的事件。 |
在
Window 上触发的事件。
|
| HTML 元素内容显示管理 |
与显示或文本元素状态的改变相关的事件。 |
在
HTMLDetailsElement、HTMLDialogElement、HTMLSlotElement 上触发的事件。
|
| 输入 |
与 HTML input 元素(如: |
在
HTMLElement、HTMLInputElement 上触发的事件。
|
| 键盘 |
与使用键盘相关的事件。 用于在按键向上、向下或仅仅只是按下时发出通知。 |
在
Document、Element 上触发的事件。
|
| 加载/卸载文档 | 在加载或卸载文档时触发的事件。 |
|
| 清单 |
与安装渐进式 web 应用清单相关的事件。 |
在
Window 上触发的事件
|
| 媒体 |
与媒体使用(包括媒体捕捉与媒体流 API、Web Audio API、画中画 API,等等)相关的事件。 |
在
ScriptProcessorNode、HTMLMediaElement、AudioTrackList、AudioScheduledSourceNode、MediaRecorder、MediaStream、MediaStreamTrack、VideoTrackList、HTMLTrackElement、OfflineAudioContext、TextTrack、TextTrackList、Element/audio,
Element/video 上触发的事件。
|
| 消息传递 |
与窗口从另一个浏览上下文接受消息相关的事件。 |
在
Window 上触发的事件。
|
| 鼠标 |
与计算机鼠标相关的事件。 用于在鼠标单机、双击、释放、按下、右击、移入移除元素/文本、选择等动作时发出通知。 指针事件为鼠标事件提供了与硬件无关的代替方案。拖放和滚轮事件派生自鼠标事件。 |
在
Element 上触发的事件。
|
| 网络连接 | 与获得和失去网络连接相关的事件。 |
在
在
|
| 支付 |
与支付请求 API 相关的事件。 |
在
|
| 性能 |
与任何性能相关的规范分组为 Performance API 的相关事件。 |
在
|
| 指针 |
与指针事件 API 相关的事件。 提供来自指针设备(包括鼠标、触控、笔/触控笔)的与硬件无关的通知。 |
在
Document、HTMLElement 上触发的事件。
|
| 打印 | 与打印相关的事件。 |
在
Window 上触发的事件。
|
| Promise rejection |
在任意 JavaScript promise 被拒绝时,发送到全局脚本上下文的事件。 |
在
Window 上触发的事件。
|
| 网络套接字 |
与 WebSockets API 相关的事件。 |
在
Websocket 上触发的事件。
|
| SVG | 与 SVG 图像相关的事件。 |
在
|
| 文本选择 |
与选择文本相关的 Selection API 事件。 |
事件( |
| 触控 |
与 Touch Events API 相关的事件。 在与触控屏交互(例如:用手指或触控笔)时发出通知。与 Force Touch API 无关。 |
在
Document、Element 上触发的事件。
|
| 虚拟现实 |
与 WebXR Device API 相关的事件。 |
在
XRSystem、XRSession、XRReferenceSpace 上触发的事件。
|
| RTC(实时通信) |
与 WebRTC API 相关的事件。 |
在
RTCDataChannel、RTCDTMFSender、RTCIceTransport、RTCPeerConnection 上触发的事件。
|
| Server-sent 事件 |
与 server sent events API 相关的事件。 |
在
EventSource 上触发的事件。
|
| 语音合成 |
与 Web Speech API 相关的事件。 |
在
SpeechSynthesisUtterance 上触发的事件。
|
| Worker |
与 Web Workers API、Service Worker API、Broadcast Channel API 和 Channel Messaging API 相关的事件。 用于相应新消息和消息发送的错误。Service worker 还可以收到其他事件的通知,包括推送通知、用户单击显示的通知 push 订阅失效、从内容索引中删除条目,等等。 |
在
ServiceWorkerGlobalScope、DedicatedWorkerGlobalScope、SharedWorkerGlobalScope、WorkerGlobalScope、Worker、BroadcastChannel、MessagePort 上触发的事件。
|
规范
| Specification |
|---|
| DOM> # events> |
| HTML> # events-2> |