事件参考
事件的触发用于通知“对变化感兴趣”的代码以影响代码的执行。这些事件可能来自用户的交互(例如:使用鼠标或调整窗口大小)、底层环境状态的改变(例如:电池电量不足或操作系统的媒体事件)和其他的情况。
每个事件都使用继承自 Event 接口的对象来表示,可以包括额外的自定义成员属性及函数,以获取事件发生时相关的更多信息。本文为每个事件都提供了一个表格(靠近顶部的区域),其中包含了指向相关事件接口的链接和其他相关的信息。事件 > 基于 Event 的接口中完整地列出了不同的事件类型。
本文提供了你可能感兴趣的主要事件类型(动画、剪切板、worker,等等)的索引,以及实现这些事件的主要的类。最后是所有提供了文档的事件列表。
备注: 此页面列出了你会在 web 上遇到的绝大多数常见事件。如果你正在查找一个这里没有列出的事件,请尝试在 MDN 上搜索它的名字、主题或关联的规范。
事件索引
| 事件类型 | 描述 | 文档 |
|---|---|---|
| 动画 |
与 Web Animation API 相关的事件。 用于响应动画状态的改变(例如:动画的开始或结束)。 |
在
Document、Window、HTMLElement 上触发的事件。
|
| 异步数据获取 |
与数据获取相关的事件。 |
在
AbortSignal、XMLHttpRequest、FileReader 上触发的事件。
|
| 剪切板 |
与 Clipboard API 相关的事件。 用于在内容被剪切、复制或粘贴时发出通知。 |
在
Document、Window、HTMLElement 上触发的事件。
|
| 文本输入(Composition) |
与文本输入相关的事件;“间接”输入文本(而不是直接使用常规的键盘输入)。 例如,使用语音转文字的引擎,或使用特殊的组合键以将键入的内容表示成另一种语言中的字符。 |
在
Element 上触发的事件。
|
| CSS 变换 |
与 CSS 变换相关的事件。 当 CSS 变换开始、停止或取消等事件发生时发出通知。 |
在
Document、Window、HTMLElement 上触发的事件。
|
| 数据库 |
与数据库操作相关的事件:打开、关闭、事务、错误,等等。 |
在
IDBDatabase、IDBOpenDBRequest、IDBRequest、IDBTransaction 上触发的事件。
|
| DOM 突变 |
与文档对象模型(DOM)层次结构和节点的修改相关的事件。 |
警告: 突变事件 (en-US)已被废弃。请使用 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 上触发的事件
|
| 媒体 |
与媒体使用(包括 Media Capture and Streams API、Web Audio API、画中画 API,等等)相关的事件。 |
在
ScriptProcessorNode、HTMLMediaElement、AudioTrackList (en-US)、AudioScheduledSourceNode、MediaRecorder、MediaStream、MediaStreamTrack、VideoTrackList、HTMLTrackElement (en-US)、OfflineAudioContext、TextTrack (en-US)、TextTrackList (en-US)、Element/audio,
Element/video 上触发的事件。
|
| 消息传递 |
与窗口从另一个浏览上下文接受消息相关的事件。 |
在
Window 上触发的事件。
|
| 鼠标 |
与计算机鼠标相关的事件。 用于在鼠标单机、双击、释放、按下、右击、移入移除元素/文本、选择等动作时发出通知。 指针事件为鼠标事件提供了与硬件无关的代替方案。拖放和滚轮事件派生自鼠标事件。 |
在
Element 上触发的事件。
|
| 网络连接 |
与获得和失去网络连接相关的事件。 |
在
在
|
| 支付 |
与支付请求 API 相关的事件。 |
|
| 性能 |
与 High Resolution Time API、Navigation Timing API、User Timing API 和 Resource Timing 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 (en-US)、XRSession (en-US)、XRReferenceSpace (en-US) 上触发的事件。
|
| RTC(实时通信) |
与 WebRTC API 相关的事件。 |
在
RTCDataChannel、RTCDTMFSender (en-US)、RTCIceTransport (en-US)、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 (en-US)、WorkerGlobalScope、Worker、WorkerGlobalScope、BroadcastChannel、MessagePort 上触发的事件。
|
事件列表
本节列出了在 MDN 上有自己的参考页面的事件。如果下面没有列出你感兴趣的某个事件,请尝试搜索它的名字、主题或关联的规范。
AbortSignalAudioScheduledSourceNodeAudioTrackList(en-US)BroadcastChannelDedicatedWorkerGlobalScopeDocument- animationcancel event (en-US)
- animationend event (en-US)
- animationiteration event (en-US)
- animationstart event (en-US)
- copy event (en-US)
- cut event (en-US)
- DOMContentLoaded event
- dragend event
- dragenter event
- dragleave event
- dragover event
- dragstart event
- drag event
- drop event
- fullscreenchange event
- fullscreenerror event
- gotpointercapture event (en-US)
- keydown event (en-US)
- keypress event
- keyup event (en-US)
- lostpointercapture event (en-US)
- paste event (en-US)
- pointercancel event (en-US)
- pointerdown event (en-US)
- pointerenter event (en-US)
- pointerleave event (en-US)
- pointerlockchange event
- pointerlockerror event (en-US)
- pointermove event (en-US)
- pointerout event (en-US)
- pointerover event (en-US)
- pointerup event (en-US)
- readystatechange event
- scroll event
- selectionchange event
- selectstart event
- touchcancel event
- touchend event
- touchmove event
- touchstart event
- transitioncancel event (en-US)
- transitionend event (en-US)
- transitionrun event (en-US)
- transitionstart event (en-US)
- visibilitychange event
- wheel event (en-US)
Element- afterscriptexecute event
- auxclick event
- beforescriptexecute event
- blur event
- click event
- compositionend event
- compositionstart event
- compositionupdate event
- contextmenu event
- copy event
- cut event
- dblclick event
- DOMActivate event
- DOMMouseScroll event
- error event
- focusin event (en-US)
- focusout event
- focus event
- fullscreenchange event
- fullscreenerror event
- gesturechange event (en-US)
- gestureend event (en-US)
- gesturestart event (en-US)
- keydown event
- keypress event
- keyup event
- mousedown event
- mouseenter event
- mouseleave event
- mousemove event
- mouseout event
- mouseover event
- mouseup event
- mousewheel event
- msContentZoom event
- MSGestureChange event
- MSGestureEnd event
- MSGestureHold event
- MSGestureStart event
- MSGestureTap event
- MSInertiaStart event
- MSManipulationStateChanged event
- paste event
- scroll event
- select event
- touchcancel event
- touchend event
- touchmove event
- touchstart event
- webkitmouseforcechanged event (en-US)
- webkitmouseforcedown event (en-US)
- webkitmouseforceup event (en-US)
- webkitmouseforcewillbegin event (en-US)
- wheel event
EventSourceFileReaderHTMLCanvasElementHTMLDetailsElementHTMLDialogElementHTMLElement- animationcancel event
- animationend event
- animationiteration event
- animationstart event
- beforeinput event
- change event
- gotpointercapture event (en-US)
- input event
- lostpointercapture event (en-US)
- pointercancel event
- pointerdown event (en-US)
- pointerenter event (en-US)
- pointerleave event (en-US)
- pointermove event (en-US)
- pointerout event (en-US)
- pointerover event (en-US)
- pointerup event (en-US)
- transitioncancel event (en-US)
- transitionend event
- transitionrun event (en-US)
- transitionstart event
HTMLFormElementHTMLInputElementHTMLMediaElement- abort event
- canplaythrough event
- canplay event
- durationchange event
- emptied event (en-US)
- ended event
- error event
- loadeddata event
- loadedmetadata event
- loadstart event
- pause event
- playing event
- play event
- progress event
- ratechange event (en-US)
- seeked event (en-US)
- seeking event (en-US)
- stalled event (en-US)
- suspend event (en-US)
- timeupdate event
- volumechange event (en-US)
- waiting event (en-US)
HTMLSlotElementHTMLTrackElement(en-US)HTMLVideoElementIDBDatabaseIDBOpenDBRequestIDBRequestIDBTransactionMediaDevicesMediaRecorderMediaStreamMediaStreamTrackMessagePortOfflineAudioContextPaymentRequest(en-US)PaymentResponse(en-US)PerformancePictureInPictureWindowRTCDataChannelRTCDtlsTransport(en-US)RTCDTMFSender(en-US)RTCIceTransport(en-US)RTCPeerConnection- addstream event
- connectionstatechange event (en-US)
- datachannel event
- icecandidateerror event (en-US)
- icecandidate event
- iceconnectionstatechange event (en-US)
- icegatheringstatechange event (en-US)
- negotiationneeded event (en-US)
- removestream event (en-US)
- signalingstatechange event (en-US)
- track event
ScriptProcessorNodeServiceWorkerContainerServiceWorkerGlobalScopeSharedWorkerGlobalScope(en-US)SpeechRecognitionSpeechSynthesisSpeechSynthesisUtteranceSVGAnimationElementSVGElementSVGGraphicsElementTextTrack(en-US)TextTrackList(en-US)VideoTrackListVisualViewportWebSocketWindow- afterprint event
- animationcancel event (en-US)
- animationend event (en-US)
- animationiteration event (en-US)
- animationstart event (en-US)
- appinstalled event
- beforeprint event
- beforeunload event
- blur event
- copy event
- cut event
- devicemotion event
- deviceorientation event
- DOMContentLoaded event
- error event
- focus event
- gamepadconnected event
- gamepaddisconnected event
- hashchange event
- languagechange event
- load event
- messageerror event
- message event
- offline event
- online event
- orientationchange event
- pagehide event
- pageshow event
- paste event
- popstate event
- rejectionhandled event
- resize event
- storage event
- transitioncancel event (en-US)
- transitionend event (en-US)
- transitionrun event (en-US)
- transitionstart event (en-US)
- unhandledrejection event
- unload event
- vrdisplayactivate event (en-US)
- vrdisplayblur event (en-US)
- vrdisplayconnect event (en-US)
- vrdisplaydeactivate event (en-US)
- vrdisplaydisconnect event (en-US)
- vrdisplayfocus event (en-US)
- vrdisplaypointerrestricted event (en-US)
- vrdisplaypointerunrestricted event (en-US)
- vrdisplaypresentchange event (en-US)
WorkerWorkerGlobalScopeXMLHttpRequestXRReferenceSpace(en-US)XRSession(en-US)XRSystem(en-US)
规范
| Specification |
|---|
| HTML Standard # events-2 |