浏览器事件#

常用浏览器事件与DOM事件，包括鼠标事件、键盘事件、框架/对象事件、表单事件、剪贴板事件、打印事件、拖动事件、多媒体事件、动画事件、过渡事件。

浏览器事件#

加载相关#

• onbeforeunload: 该事件在即将离开页面（刷新或关闭）时触发。
• onload: 文档加载完成后触发。
• onunload: 当窗口卸载其内容和资源时触发。
• onerror: 当发生JavaScript运行时错误与资源加载失败时触发。
• onabort: 发送到window的中止abort事件的事件处理程序，不适用于Firefox 2或Safari。

窗口相关#

• onblur: 窗口失去焦点时触发。
• onfocus: 窗口获得焦点时触发。
• onresize: 窗口大小发生改变时触发。
• onscroll: 窗口发生滚动时触发。
• onmessage: 窗口对象接收消息事件时触发。
• onchange: 窗口内表单元素的内容改变时触发。
• oninput: 窗口内表单元素获取用户输入时触发。
• onreset: 窗口内表单重置时触发。
• onselect: 窗口内表单元素中文本被选中时触发。
• onsubmit: 窗口内表单中submit按钮被按下触发。
• onhashchange: 当窗口的锚点哈希值发生变化时触发。

鼠标相关#

• onclick: 当点击页面时触发。
• onmouseup: 鼠标按键被松开时触发。
• ondblclick: 当双击页面时调用事件句柄。
• oncontextmenu: 在点击鼠标右键打开上下文菜单时触发。
• onmousedown: 鼠标按钮被按下时触发。
• onmousemove: 当移动鼠标时触发。
• onmouseout: 鼠标移出窗口时触发。
• onmouseover: 鼠标移动到窗口时触发。
• onauxclick: 指示在输入设备上按下非主按钮时触发，例如鼠标中键。

键盘相关#

• onkeydown: 某个键盘按键被按下时触发。
• onkeyup: 某个键盘按键被松开后触发。
• onkeypress: 某个键盘按键被按下并松开后触发。

动画相关#

• onanimationcancel: 当CSS动画意外中止时，即在任何时候它停止运行而不发送animationend事件时将发送此事件，例如当animation-name被改变，动画被删除等
• onanimationend: 当CSS动画到达其活动周期的末尾时，按照(animation-duration*animation-iteration-count) + animation-delay进行计算，将发送此事件。
• onanimationiteration: 此事件将会在CSS动画到达每次迭代结束时触发，当通过执行最后一个动画步骤完成对动画指令序列的单次传递完成时，迭代结束。

设备相关#

• ondevicemotion: 设备状态发生改变时触发
• ondeviceorientation: 设备相对方向发生改变时触发
• ondeviceproximity: 当设备传感器检测到物体变得更接近或更远离设备时触发。

打印相关#

• onbeforeprint: 该事件在页面即将开始打印时触发
• onafterprint: 该事件在页面已经开始打印或者打印窗口已经关闭时触发。

应用相关#

• onappinstalled: 一旦将Web应用程序成功安装为渐进式Web应用程序，该事件就会被分派。
• onbeforeinstallprompt: 当用户即将被提示安装web应用程序时，该处理程序将在设备上调度，其相关联的事件可以保存以供稍后用于在更适合的时间提示用户。

DOM事件#

鼠标相关#

• onclick: 当用户点击某个对象时调用的事件句柄。
• oncontextmenu: 在用户点击鼠标右键打开上下文菜单时触发
• ondblclick: 当用户双击某个对象时调用的事件句柄。
• onmousedown: 鼠标按钮被按下。
• onmouseenter: 当鼠标指针移动到元素上时触发。
• onmouseleave: 当鼠标指针移出元素时触发
• onmousemove: 鼠标被移动。
• onmouseover: 鼠标移到某元素之上。
• onmouseout: 鼠标从某元素移开。
• onmouseup: 鼠标按键被松开。
• onwheel: 该事件在鼠标滚轮在元素上下滚动时触发。

键盘相关#

• onkeydown: 某个键盘按键被按下。
• onkeypress: 某个键盘按键被按下并松开。
• onkeyup: 某个键盘按键被松开。

框架/图像相关#

• onabort: 图像的加载被中断。
• onbeforeunload: 该事件在即将离开页面（刷新或关闭）时触发
• onerror: 在加载文档或图像时发生错误。
• onhashchange: 该事件在当前URL的锚部分发生修改时触发。
• onload: 一张页面或一幅图像完成加载。
• onpageshow: 该事件在用户访问页面时触发
• onpagehide: 该事件在用户离开当前网页跳转到另外一个页面时触发
• onresize: 窗口或框架被重新调整大小。
• onscroll: 当文档被滚动时发生的事件。
• onunload: 用户退出页面。
• visibilitychange: document监听事件，浏览器标签页被隐藏或显示的时触发
• onmessage: 从WebSocket、Web Worker、Event Source、iframe或父窗口接收到消息时触发。
• ononline: 该事件在浏览器开始在线工作时触发。
• onoffline: 该事件在浏览器开始离线工作时触发。
• onshow: 该事件当<menu>元素在上下文菜单显示时触发。
• ontoggle: 该事件在用户打开或关闭<details>元素时触发。

表单事件相关#

• onblur: 元素失去焦点时触发。
• onchange: 该事件在表单元素的内容改变时触发。
• onfocus: 元素获取焦点时触发。
• onfocusin: 元素即将获取焦点时触发。
• onfocusout: 元素即将失去焦点时触发。
• oninput: 元素获取用户输入时触发。
• onreset: 表单重置时触发。
• onsearch: 用户向搜索域输入文本时触发。
• onselect: 用户在输入框内选取文本时触发。
• onsubmit: 表单提交时触发。

剪贴板相关#

• oncopy: 该事件在用户拷贝元素内容时触发。
• oncut: 该事件在用户剪切元素内容时触发。
• onpaste: 该事件在用户粘贴元素内容时触发。

打印相关#

• onafterprint: 该事件在页面已经开始打印，或者打印窗口已经关闭时触发。
• onbeforeprint: 该事件在页面即将开始打印时触发。

拖动相关#

• ondrag: 该事件在元素正在拖动时触发。
• ondragend: 该事件在用户完成元素的拖动时触发。
• ondragenter: 该事件在拖动的元素进入放置目标时触发。
• ondragleave: 该事件在拖动元素离开放置目标时触发。
• ondragover: 该事件在拖动元素在放置目标上时触发。
• ondragstart: 该事件在用户开始拖动元素时触发。
• ondrop: 该事件在拖动元素放置在目标区域时触发。

多媒体相关#

• onabort: 事件在视频/音频终止加载时触发。
• oncanplay: 事件在用户可以开始播放视频/音频时触发。
• oncanplaythrough: 事件在视频/音频可以正常播放且无需停顿和缓冲时触发。
• ondurationchange: 事件在视频/音频的时长发生变化时触发。
• onemptied: 当期播放列表为空时触发
• onended: 事件在视频/音频播放结束时触发。
• onerror: 事件在视频/音频数据加载期间发生错误时触发。
• onloadeddata: 事件在浏览器加载视频/音当前帧时触发触发。
• onloadedmetadata: 事件在指定视频/音频的元数据加载后触发。
• onloadstart: 事件在浏览器开始寻找指定视频/音频触发。
• onpause: 事件在视频/音频暂停时触发。
• onplay: 事件在视频/音频开始播放时触发。
• onplaying: 事件在视频/音频暂停或者在缓冲后准备重新开始播放时触发。
• onprogress: 事件在浏览器下载指定的视频/音频时触发。
• onratechange: 事件在视频/音频的播放速度发送改变时触发。
• onseeked: 事件在用户重新定位视频/音频的播放位置后触发。
• onseeking: 事件在用户开始重新定位视频/音频时触发。
• onstalled: 事件在浏览器获取媒体数据，但媒体数据不可用时触发。
• onsuspend: 事件在浏览器读取媒体数据中止时触发。
• ontimeupdate: 事件在当前的播放位置发送改变时触发。
• onvolumechange: 事件在音量发生改变时触发。
• onwaiting: 事件在视频由于要播放下一帧而需要缓冲时触发。

动画相关#

• animationend: 该事件在CSS动画结束播放时触发
• animationiteration: 该事件在CSS动画重复播放时触发
• animationstart: 该事件在CSS动画开始播放时触发

过渡相关#

• transitionend: 该事件在CSS完成过渡后触发。

每日一题#

参考#