事件类型
DOM 事件被发送用于通知代码相关的事情已经发生了。每个事件都是继承自 Event 类的对象,可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。事件可以表示从基本用户交互到渲染模型中发生的事件的自动通知的所有内容。
资源事件
事件名称 | 何时触发 |
---|
cached | manifest 中列出的资源已经下载,应用程序现在已缓存 |
error | 资源加载失败时 |
abort | 正在加载资源已经被中止时 |
load | 资源及其相关资源已完成加载 |
beforeunload | window 、document 及其资源即将被卸载 |
unload | 文档或一个依赖资源正在被卸载 |
网络事件
事件名称 | 何时触发 |
---|
online | 浏览器已获得网络访问 |
offline | 浏览器已失去网络访问 |
焦点事件
事件名称 | 何时触发 |
---|
focus | 元素获得焦点(不会冒泡) |
blur | 元素失去焦点(不会冒泡) |
Websocket 事件
事件名称 | 何时触发 |
---|
open | WebSocket 连接已建立 |
message | 通过 WebSocket 接收到一条消息 |
error | WebSocket 连接异常被关闭(比如某些数据无法发送) |
close | WebSocket 连接已关闭 |
会话历史事件
事件名称 | 何时触发 |
---|
pagehide | 用户离开网页时触发 |
pageshow | 用户浏览网页时触发 |
pagestate | |
CSS 动画事件
事件名称 | 何时触发 |
---|
animationstart | 某个 CSS 动画开始时触发 |
animationend | 某个 CSS 动画完成时触发 |
animationiteration | 某个 CSS 动画完成后重新开始时触发 |
CSS 过渡事件
事件名称 | 何时触发 |
---|
transitionstart | 某个过渡开始时触发(延时后) |
transitioncancel | 某个过渡取消后触发 |
transitionend | 某个过渡完成时触发 |
transitionrun | 某个过渡在运行时触发(延时前) |
表单事件
事件名称 | 何时触发 |
---|
reset | 点击重置按钮时 |
submit | 点击提交按钮 |
视图事件
事件名称 | 何时触发 |
---|
fullscreenchange | |
fullscreenerror | |
resize | |
scroll | |
剪贴板事件
事件名称 | 何时触发 |
---|
cut | 已经剪贴选中的文本内容并且复制到剪贴板 |
copy | 已经把选中的文本内容复制到了剪贴板 |
paste | 从剪贴板复制的文本内容被粘贴 |
键盘事件
事件名称 | 何时触发 |
---|
keydown | 按下任意按键 |
keypress | 除 Shift、Fn、CapsLock 外任意键被按住 |
keyup | 释放任意按键 |
鼠标事件
事件名称 | 何时触发 |
---|
mouseenter | 指针移到有事件监听的元素内 |
mouseover | 指针移到有事件监听的元素或者它的子元素内 |
mousemove | 指针在元素内移动时持续触发 |
mousedown | 在元素上按下任意鼠标按钮 |
mouseup | 在元素上释放任意鼠标按键 |
click | 在元素上按下并释放任意鼠标按键 |
dbclick | 在元素上双击鼠标按钮 |
contextmenu | 右键点击 |
wheel | 滚轮向任意方向滚动 |
mouseleave | 指针移出元素范围外(不冒泡) |
mouseout | 指针移出元素,或者移到它的子元素上 |
select | 文本被选中 |
pointerlockchange | 鼠标被锁定或者解除锁定发生时 |
pointerlockerror | 可能因为一些技术的原因鼠标锁定被禁止时 |
拖拽事件
事件名称 | 何时触发 |
---|
dragstart | 用户开始拖动 HTML 元素或选中的文本 |
drag | 正在拖动元素或文本选区(在此过程中持续触发,每 350ms 触发一次) |
dragend | 拖放操作结束(松开鼠标按钮或按下 Esc 键) |
dragenter | 被拖动的元素或文本选区移入有效释放目标区 |
dragover | 被拖动的元素或文本选区正在有效释放目标上被拖放(在此过程中持续触发,每 350ms 触发一次) |
dragleave | 被拖动的元素或文本选区移出有效释放目标区 |
drop | 元素在有效释放目标区上释放 |
媒体事件
事件名称 | 何时触发 |
---|
durationchange | 当指定音频/视频的时长数据发生变化时 |
loadedmetadata | 当指定音频/视频的元数据已加载时 |
loadeddata | 当当前的数据已加载,单没有足够的数据来播放指定音频/视频的下一帧时 |
canplay | 当浏览器能够开始播放指定的音频/视频时 |
canplaythrough | 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时 |
ended | 当指定音频/视频播放完成后触发 |
emptied | |
stalled | 浏览器尝试获取媒体数据,但数据不可用时触发 |
suspend | 浏览器刻意不加载媒体数据时触发 |
play | 开始播放音频/视频时触发 |
playing | 当音频/视频因缓冲而暂停或停止后已就绪时触发 |
pause | 当音频/视频已暂停时触发 |
waiting | 当视频由于需要缓冲下一帧而停止时触发 |
seeking | 当用户开始移动/跳跃到音频/视频中的新位置时触发 |
seeked | 当用户已移动/跳跃到音频/视频中的新位置时触发 |
ratechange | 当音频/视频的播放速度已更改时触发 |
timeupdate | 当目前的播放位置已更改时触发 |
volumechange | 当音量已更改时触发 |
进度事件
事件名称 | 何时触发 |
---|
loadstart | 浏览开始寻找指定音频/视频时,即当加载过程开始时触发 |
progress | 浏览器正在下载指定的音频/视频时触发 |
error | 加载过程发生错误时触发 |
timeout | 加载过程由于超时而失败时触发 |
abort | 多媒体数据终止下载时触发,而不是发生错误时触发 |
load | 加载完成时触发 |
loadend | 进度加载停止(在 error 、abort 和 load 完成时执行) |
其他更多不常见及非标准事件分类详阅读 Mozilla Events
参考资料: