HTML-Events

耶温

2580字约9分钟

2024-07-25

Window 窗口事件

事件名称	事件介绍	应用场景
`onafterprint`	在文档被打印后触发的事件。	清除打印前设置的一些样式或布局更改；执行清理操作，如重置页面状态。
`onbeforeprint`	在文档准备打印前触发的事件。	应用专门用于打印的样式，比如隐藏某些元素或改变布局；调整页面内容以便更好地适应打印输出。
`onbeforeunload`	在窗口、文档和资源即将卸载时触发的事件。	在用户离开页面前提示用户是否保存未提交的数据；清理资源或执行必要的清理工作，比如关闭WebSocket连接等。
`onerror`	在文档或脚本发生错误时触发的事件。	捕获错误并记录错误信息，帮助调试；阻止默认行为，比如阻止页面显示错误信息。
`onhashchange`	在URL中的哈希部分（即 # 后面的部分）发生改变时触发的事件。	监听哈希变化并相应地更新页面内容，适用于单页应用中的路由管理；实现不需要完整页面刷新的导航功能。
`onload`	在文档完全加载完毕后触发的事件。	初始化页面元素和脚本；执行页面加载后的必要操作。
`onmessage`	在接收到来自另一个源的消息时触发的事件。	实现跨窗口或跨文档的消息传递；处理来自Worker线程的消息。
`onoffline`	当浏览器检测到网络断开时触发的事件。	显示离线提示信息；处理网络断开的情况。
`ononline`	当浏览器检测到网络连接恢复时触发的事件。	更新页面内容以反映在线状态；重新尝试之前失败的网络请求。
`onpagehide`	当页面从视图中隐藏时触发的事件。	清理资源或执行必要的清理工作；保存页面状态。
`onpageshow`	当页面变为可见时触发的事件。	加载页面状态；恢复用户界面。
`onpopstate`	当浏览器的历史记录发生变化时触发的事件。	处理浏览器前进或后退的操作；更新页面状态。
`onresize`	当浏览器窗口大小发生变化时触发的事件。	重新计算布局和样式；更新响应式设计。
`onstorage`	当本地存储（如localStorage）发生变化时触发的事件。	更新页面显示与存储相关的信息；同步其他窗口或标签页的状态。
`onunload`	在文档即将卸载时触发的事件。	执行必要的清理工作；记录用户活动。

Form 表单事件

事件名称	事件介绍	应用场景
`onblur`	当元素失去焦点时触发的事件。	验证表单输入；清除定时器或取消持续的操作。
`onchange`	当元素的内容或选中状态发生变化时触发的事件。	提交表单数据；更新UI显示。
`oncontextmenu`	当用户试图显示上下文菜单时触发的事件。	自定义上下文菜单；阻止默认上下文菜单的显示。
`onfocus`	当元素获得焦点时触发的事件。	显示提示信息；初始化输入字段。
`oninput`	当输入元素的内容发生变化时触发的事件。	实时验证输入；更新UI显示。
`oninvalid`	当表单元素不符合其约束验证规则时触发的事件。	显示验证错误信息；阻止无效数据的提交。
`onreset`	当表单被重置时触发的事件。	保存表单原始数据；执行重置前的清理工作。
`onsearch`	当 `<input type="search">` 元素的值发生变化时触发的事件。	更新搜索结果；实时过滤数据。
`onselect`	当用户选择文本时触发的事件。	复制或操作选定的文本；显示选定文本的统计信息。
`onsubmit`	当表单提交时触发的事件。	验证表单数据；处理表单提交前的操作。

Keyboard 键盘事件

事件名称	事件介绍	应用场景
`onkeydown`	当按键被按下时触发的事件。	捕获键盘输入；实现键盘导航功能。
`onkeypress`	当字符键被按下时触发的事件。	处理字符输入；限制特定字符的输入。
`onkeyup`	当按键被释放时触发的事件。	处理按键释放后的操作；实现键盘命令。

Mouse 鼠标事件

事件名称	事件介绍	应用场景
`onclick`	当鼠标按钮被点击时触发的事件。	触发交互行为；提交表单或链接跳转。
`ondblclick`	当鼠标按钮被双击时触发的事件。	执行双击操作；放大或缩小元素。
`onmousedown`	当鼠标按钮被按下时触发的事件。	开始拖拽操作；触发持续的动作。
`onmousemove`	当鼠标在页面上移动时触发的事件。	显示工具提示；实现鼠标跟随效果。
`onmouseout`	当鼠标离开元素时触发的事件。	隐藏工具提示；取消悬停效果。
`onmouseover`	当鼠标进入元素时触发的事件。	显示工具提示；应用悬停效果。
`onmouseup`	当鼠标按钮被释放时触发的事件。	结束拖拽操作；完成持续的动作。
`onmousewheel`	当鼠标滚轮滚动时触发的事件。	放大或缩小视图；滚动列表或滑块。
`onwheel`	当鼠标滚轮滚动时触发的事件（更现代的替代 `onmousewheel`）。	放大或缩小视图；滚动列表或滑块。

Drag 拖拽事件

事件名称	事件介绍	应用场景
`ondrag`	当元素被拖动时触发的事件。	更新拖动状态；显示拖动进度。
`ondragend`	当拖动结束时触发的事件。	清理拖动状态；执行拖动完成后的操作。
`ondragenter`	当元素进入拖动目标时触发的事件。	显示接收区的视觉提示；准备接收拖动数据。
`ondragleave`	当元素离开拖动目标时触发的事件。	清除接收区的视觉提示；取消接收拖动数据的准备。
`ondragover`	当元素在拖动目标上时持续触发的事件。	更新接收区的视觉提示；阻止默认行为以允许放置。
`ondragstart`	当拖动开始时触发的事件。	初始化拖动数据；设置拖动图标。
`ondrop`	当元素被放置到目标上时触发的事件。	接收拖动数据；执行放置后的操作。
`onscroll`	当滚动条滚动时触发的事件。	动态加载内容；更新滚动条位置指示器。

Clipboard 复制粘贴事件

事件名称	事件介绍	应用场景
`oncopy`	当用户复制内容时触发的事件。	验证复制的内容；提供额外的复制选项。
`oncut`	当用户剪切内容时触发的事件。	验证剪切的内容；提供额外的剪切选项。
`onpaste`	当用户粘贴内容时触发的事件。	验证粘贴的内容；格式化粘贴的数据。

Media 媒体事件

事件名称	事件介绍	应用场景
`onabort`	当媒体下载被中断时触发的事件。	处理下载中断的情况；显示错误信息。
`oncanplay`	当媒体可以开始播放但可能需要缓冲更多数据时触发的事件。	准备播放；更新UI显示播放状态。
`oncanplaythrough`	当媒体可以流畅播放而无需进一步缓冲时触发的事件。	开始播放；更新UI显示播放状态。
`oncuechange`	当时间轴上的字幕或标记发生变化时触发的事件。	更新字幕或标记显示；处理时间轴的变化。
`ondurationchange`	当媒体的持续时间发生变化时触发的事件。	更新播放进度条；显示新的持续时间。
`onemptied`	当媒体资源已变得空或不再可用时触发的事件。	处理资源丢失的情况；显示错误信息。
`onended`	当媒体播放结束时触发的事件。	重置播放状态；循环播放或跳转到下一个媒体。
`onerror`	当媒体播放遇到错误时触发的事件。	处理播放错误；显示错误信息。
`onloadeddata`	当媒体数据已被加载时触发的事件。	更新播放进度条；显示播放时间。
`onloadedmetadata`	当媒体的元数据已加载时触发的事件。	更新播放进度条；显示媒体元数据。
`onloadstart`	当媒体开始加载时触发的事件。	准备播放；显示加载状态。
`onpause`	当媒体暂停时触发的事件。	更新UI显示暂停状态；保存播放位置。
`onplay`	当媒体开始播放时触发的事件。	更新UI显示播放状态；开始计时。
`onplaying`	当媒体从暂停状态恢复播放时触发的事件。	更新UI显示播放状态；继续计时。
`onprogress`	当媒体数据正在加载时触发的事件。	更新加载进度；显示加载状态。
`onratechange`	当播放速率发生变化时触发的事件。	更新UI显示播放速率；处理速率变化。
`onseeked`	当媒体播放位置已改变时触发的事件。	更新播放位置；更新UI显示。
`onseeking`	当媒体正在寻找新的播放位置时触发的事件。	更新UI显示寻找状态；处理位置变化。
`onstalled`	当媒体加载停止但有足够的数据继续播放时触发的事件。	更新UI显示停滞状态；处理停滞情况。
`onsuspend`	当媒体加载被暂停时触发的事件。	更新UI显示暂停状态；处理加载暂停。
`ontimeupdate`	当播放时间更新时触发的事件。	更新播放进度条；显示当前时间。
`onvolumechange`	当音量发生变化时触发的事件。	更新UI显示音量变化；处理音量变化。
`onwaiting`	当媒体播放暂停以等待更多数据时触发的事件。	更新UI显示等待状态；处理等待情况。

Misc 其他事件

事件名称	事件介绍	应用场景
`ontoggle`	当元素`<details>`的可见状态改变时触发的事件。	更新元素的可见状态；处理显示/隐藏的行为。