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> |