HTML 事件属性
全局事件属性
HTML 能够让事件触发浏览器中的操作,例如当用户点击一个元素时启动一个 JavaScript。
要了解更多关于编程事件的信息,请访问我们的 JavaScript 教程。
下面是可添加到 HTML 元素中以定义事件操作的全局事件属性。
窗口事件属性
为 window 对象触发的事件(应用于 <body> 标签)
| Attribute | 值 | 描述 |
|---|---|---|
| onafterprint | script | 在打印文档后运行的脚本 |
| onbeforeprint | script | 在打印文档前运行的脚本 |
| onbeforeunload | script | 在文档即将卸载时运行的脚本 |
| onerror | script | 发生错误时运行的脚本 |
| onhashchange | script | URL 的锚点部分发生更改时运行的脚本 |
| onload | script | 页面加载完成后触发 |
| onmessage | script | 触发消息时运行的脚本 |
| onoffline | script | 浏览器开始离线工作时运行的脚本 |
| ononline | script | 浏览器开始在线工作时运行的脚本 |
| onpagehide | script | 用户离开页面时运行的脚本 |
| onpageshow | script | 用户导航到页面时运行的脚本 |
| onpopstate | script | 窗口历史记录更改时运行的脚本 |
| onresize | script | 浏览器窗口大小调整时触发 |
| onstorage | script | Web Storage 区域更新时运行的脚本 |
| onunload | script | 页面卸载(或浏览器窗口关闭)后触发 |
表单事件
由 HTML 表单内的操作触发的事件(适用于几乎所有 HTML 元素,但最常用于表单元素)
| Attribute | 值 | 描述 |
|---|---|---|
| onblur | script | 元素失去焦点时触发 |
| onchange | script | 元素值更改时触发 |
| oncontextmenu | script | 触发上下文菜单时运行的脚本 |
| onfocus | script | 元素获得焦点时触发 |
| oninput | script | 用户向元素输入内容时运行的脚本 |
| oninvalid | script | 元素无效时运行的脚本 |
| onreset | script | 表单中的重置按钮被点击时触发 |
| onsearch | script | 在搜索字段(对于 <input="search">)中输入内容时触发 |
| onselect | script | 元素中选择了一些文本后触发 |
| onsubmit | script | 表单提交时触发 |
键盘事件
| Attribute | 值 | 描述 |
|---|---|---|
| onkeydown | script | 用户按键时触发 |
| onkeypress | script | 用户按下某个键时触发 |
| onkeyup | script | 用户释放按键时触发 |
鼠标事件
| Attribute | 值 | 描述 |
|---|---|---|
| onclick | script | 在元素上鼠标单击时触发 |
| ondblclick | script | 在元素上鼠标双击时触发 |
| onmousedown | script | 在元素上按下鼠标按钮时触发 |
| onmousemove | script | 当鼠标指针在元素上方移动时触发 |
| onmouseout | script | 鼠标指针移出元素范围时触发 |
| onmouseover | script | 鼠标指针移到元素上方时触发 |
| onmouseup | script | 在元素上释放鼠标按钮时触发 |
| onmousewheel | script | 已弃用。 请使用 onwheel 属性代替 |
| onwheel | script | 鼠标滚轮在元素上向上或向下滚动时触发 |
拖放事件
| Attribute | 值 | 描述 |
|---|---|---|
| ondrag | script | 拖动元素时运行的脚本 |
| ondragend | script | 拖动操作结束时运行的脚本 |
| ondragenter | script | 将拖动的元素拖到有效放置目标时运行的脚本 |
| ondragleave | script | 元素离开有效放置目标时运行的脚本 |
| ondragover | script | 元素正在拖动到有效放置目标时运行的脚本 |
| ondragstart | script | 拖动操作开始时运行的脚本 |
| ondrop | script | 拖动元素被放置时运行的脚本 |
| onscroll | script | 滚动元素滚动条时运行的脚本 |
剪贴板事件
| Attribute | 值 | 描述 |
|---|---|---|
| oncopy | script | 用户复制元素内容时触发 |
| oncut | script | 用户剪切元素内容时触发 |
| onpaste | script | 用户在元素中粘贴内容时触发 |
媒体事件
由视频、图像和音频等媒体触发的事件(适用于所有 HTML 元素,但在媒体元素(如 <audio>、<embed>、<img>、<object> 和 <video>)中最为常见)。
提示: 有关更多信息,请参阅我们的 HTML 音频和视频 DOM 参考。
| Attribute | 值 | 描述 |
|---|---|---|
| onabort | script | 中止时运行的脚本 |
| oncanplay | script | 文件准备好开始播放时运行的脚本(当它已缓冲足够开始播放时) |
| oncanplaythrough | script | 文件可以一直播放到结束而无需暂停缓冲时运行的脚本 |
| oncuechange | script | <track> 元素中的提示发生更改时运行的脚本 |
| ondurationchange | script | 媒体长度更改时运行的脚本 |
| onemptied | script | 文件突然变得不可用时(例如意外断开连接)发生的错误时运行的脚本 |
| onended | script | 媒体到达结尾时运行的脚本(例如“感谢收听”等消息的有用事件) |
| onerror | script | 加载文件时发生错误时运行的脚本 |
| onloadeddata | script | 加载媒体数据时运行的脚本 |
| onloadedmetadata | script | 加载元数据(如尺寸和时长)时运行的脚本 |
| onloadstart | script | 在实际加载任何内容之前,文件开始加载时运行的脚本 |
| onpause | script | 用户或程序暂停媒体时运行的脚本 |
| onplay | script | 媒体准备开始播放时运行的脚本 |
| onplaying | script | 媒体实际开始播放时运行的脚本 |
| onprogress | script | 浏览器在获取媒体数据过程中运行时运行的脚本 |
| onratechange | script | 播放速率改变时(例如当用户切换到慢动作或快进模式时)每次运行的脚本 |
| onseeked | script | 设置 seeking 属性为 false(表示寻找已结束)时运行的脚本 |
| onseeking | script | 设置 seeking 属性为 true(表示寻找正在进行)时运行的脚本 |
| onstalled | script | 无论何种原因,浏览器无法获取媒体数据时运行的脚本 |
| onsuspend | script | 无论何种原因,在完全加载媒体数据之前停止获取媒体数据时运行的脚本 |
| ontimeupdate | script | 播放位置发生改变时(例如当用户快进到媒体的不同点时)每次运行的脚本 |
| onvolumechange | script | 每次音量改变时(包括将音量设置为“静音”)运行的脚本 |
| onwaiting | script | 媒体暂停但预期会恢复时(例如当媒体暂停以缓冲更多数据时)运行的脚本 |
杂项事件
| Attribute | 值 | 描述 |
|---|---|---|
| ontoggle | script | 用户打开或关闭 <details> 元素时触发 |