JavaScript中的事件类型汇总（官方推荐）

参考官方文档：https://developer.mozilla.org/zh-CN/docs/Web/Events

 

最常见的类别节

资源事件

事件名称 何时触发 cached manifest中列出的资源已经下载，应用程序现在已缓存。 error 资源加载失败时 abort 正在加载资源已经被中止时 load 资源及其相关资源已完成加载。 beforeunload window，document 及其资源即将被卸载。 unload 文档或一个依赖资源正在被卸载。

网络事件

事件名称	何时触发
online	浏览器已获得网络访问。
offline	浏览器已失去网络访问。

焦点事件

事件名称 何时触发 focus 元素获得焦点（不会冒泡） blur 元素失去焦点（不会冒泡）

Websocket事件

事件名称	何时触发
open	WebSocket连接已建立
message	通过WebSocket接收到一条消息
error	WebSocket连接异常被关闭（比如有些数据无法发送）。
close	WebSocket连接已关闭

会话历史事件

事件名称 何时触发 pagehide A session history entry is being traversed from. pageshow A session history entry is being traversed to. popstate A session history entry is being navigated to (in certain cases).

CSS 动画事件

事件触发 何时触发 animationstart 某个CSS动画开始时触发 animationend 某个CSS动画完成时触发 animationiteration 某个CSS动画完成后重新开始时触发

表单事件

事件名称 何时触发 reset 点击重置按钮时 submit 点击提交按钮

打印事件

时间名称 何时触发 beforeprint 打印机已经就绪时触发 afterprint 打印机关闭时触发

文本组合事件

Event Name Fired When compositionstart The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition). compositionupdate A character is added to a passage of text being composed. compositionend The composition of a passage of text has been completed or canceled.

视图事件

Event Name Fired When fullscreenchange An element was turned to fullscreen mode or back to normal mode. fullscreenerror It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied. resize The document view has been resized. scroll The document view or an element has been scrolled.

剪贴板事件

Event Name Fired When cut 已经剪贴选中的文本内容并且复制到了剪贴板 copy 已经把选中的文本内容复制到了剪贴板 paste 从剪贴板复制的文本内容被粘贴

键盘事件

Event Name Fired When keydown 按下任意按键 keypress 除 Shift, Fn, CapsLock 外任意键被按住. (连续触发) keyup 释放任意按键

鼠标事件

Event Name Fired When mouseenter 指针移到有事件监听的元素内 mouseover 指针移到有事件监听的元素或者它的子元素内 mousemove 指针在元素内移动时持续触发 mousedown 在元素上按下任意鼠标按钮 mouseup 在元素上释放任意鼠标按键 click 在元素上按下并释放任意鼠标按键 dblclick 在元素上双击鼠标按钮 contextmenu 右键点击 (右键菜单显示前). wheel 滚轮向任意方向滚动 mouseleave 指针移出元素范围外（不冒泡） mouseout 指针移出元素，或者移到它的子元素上 select 文本被选中被选中 pointerlockchange 鼠标被锁定或者解除锁定发生时 pointerlockerror 可能因为一些技术的原因鼠标锁定被禁止时。

拖放事件

Event Name Fired When dragstart 用户开始拖动HTML元素或选中的文本 drag 正在拖动元素或文本选区（在此过程中持续触发，每350ms触发一次） dragend 拖放操作结束 （松开鼠标按钮或按下Esc键） dragenter 被拖动的元素或文本选区移入有效释放目标区 dragover 被拖动的元素或文本选区正在有效释放目标上被拖动 （在此过程中持续触发，每350ms触发一次） dragleave 被拖动的元素或文本选区移出有效释放目标区 drop 元素在有效释放目标区上释放

媒体事件

Event Name Fired When durationchange The  duration attribute has been updated. loadedmetadata The metadata has been loaded. loadeddata The first frame of the media has finished loading. canplay The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. canplaythrough The browser estimates it can play the media up to its end without stopping for content buffering. ended Playback has stopped because the end of the media was reached. emptied The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the  load()method is called to reload it. stalled The user agent is trying to fetch media data, but data is unexpectedly not forthcoming. suspend Media data loading has been suspended. play Playback has begun. playing Playback is ready to start after having been paused or delayed due to lack of data. pause Playback has been paused. waiting Playback has stopped because of a temporary lack of data. seeking A  seek operation began. seeked A  seek operation completed. ratechange The playback rate has changed. timeupdate The time indicated by the  currentTime attribute has been updated. volumechange The volume has changed. complete The rendering of an  OfflineAudioContext is terminated. ended Playback has stopped because the end of the media was reached. audioprocess The input buffer of a  ScriptProcessorNode is ready to be processed.

进度事件

Event Name Fired When loadstart Progress has begun. progress In progress. error Progression has failed. timeout Progression is terminated due to preset time expiring. abort Progression has been terminated (not due to an error). load Progression has been successful. loadend Progress has stopped (after "error", "abort" or "load" have been dispatched).

存储事件节

change (see Non-standard events)
storage

更新事件节

checking
downloading
error
noupdate
obsolete
updateready

值变化事件节

broadcast
CheckboxStateChange
hashchange
input
RadioStateChange
readystatechange
ValueChange

未分类的事件节

invalid
localized
message
message
message
open
show