浏览器事件

浏览器事件

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

浏览器事件

加载相关

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

窗口相关

  • 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: 从WebSocketWeb WorkerEvent Sourceiframe或父窗口接收到消息时触发。
  • 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Window对象

    window作为全局变量,代表了脚本正在运行的窗口,将属性与方法暴露给JavaScript。

    WindrunnerMax
  • patch命令

    patch指令让用户利用设置修补文件的方式、修改、更新原始文件,倘若一次仅修改一个文件,可直接在指令列中下达指令依序执行,如果配合修补文件的方式则能一次修补大批...

    WindrunnerMax
  • 手动实现apply、call、bind

    每个Function对象都存在apply()、call()、bind()方法,其作用都是可以在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函...

    WindrunnerMax
  • <video>标签

    Html5知典
  • <audio>标签

    <audio> 标签用于音频内容,可以包含多个音频资源。浏览器会自动选择最合适的一个来用。

    Html5知典
  • 实现一个hoverDelay延迟hover

    经常在页面开发中,需要使用hover事件来触发相应的网络请求或页面DOM元素显示切换,需要考虑的问题就有了:

    Tiffany_c4df
  • 分布式计算平台:Dryad

    微软正在研究开发的允许编程人员利用计算机集群(Cluster)或者数据中心运行数据并行处理程序的一个体系架构Dryad, Dryad是微软对应于Google的M...

    张善友
  • [享学Netflix] 二十一、Hystrix指标数据收集(预热):滑动窗口算法(附代码示例)

    代码下载地址:https://github.com/f641385712/netflix-learning

    YourBatman
  • 用Python抓取百度翻译内容并打造自己的翻译脚本!

    英文不好一直是我的一个短板,尤其是在学习代码的阶段,经常需要查询各种错误,很是苦逼,一直就想自己做个翻译的脚本,省去打开网页的时间,但是查询之后发现网上的教程都...

    云飞
  • 一次Impala upsert kudu执行缓慢问题排查总结

    BI同学会用Impala在Kudu表上跑一些ETL任务,最近,BI同学反馈一个Kudu表的ETL任务突然变慢,执行时间从原来的不到1分钟到现在的7分钟。

    Fayson

扫码关注云+社区

领取腾讯云代金券