浏览器事件
时间:2022-07-24
本文章向大家介绍浏览器事件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
浏览器事件
常用浏览器事件与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
动画开始播放时触发
过渡相关
-
atransitionend
: 该事件在 CSS 完成过渡后触发。
参考
https://www.runoob.com/jsref/obj-window.html
https://www.runoob.com/jsref/dom-obj-event.html
https://www.w3cschool.cn/fetch_api/fetch_api-b5d62rev.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Laravel推荐使用的十个辅助函数
- PHP htmlentities()函数用法讲解
- thinkphp5框架API token身份验证功能示例
- PHP基于mcript扩展实现对称加密功能示例
- php和asp语法上的区别总结
- 解决python pandas读取excel中多个不同sheet表格存在的问题
- .img/.hdr格式转.nii格式的操作
- PHP实现的操作数组类库定义与用法示例
- python使用nibabel和sitk读取保存nii.gz文件实例
- PHP从尾到头打印链表实例讲解
- python如何写try语句
- python怎么判断素数
- php数组遍历类与用法示例
- PHP格式化显示时间date()函数代码
- python操作微信自动发消息的实现(微信聊天机器人)