HTML 事件

时间 2019-12-05

标签 html 事件栏目 HTML 繁體版

原文原文链接

一、HTML 全局事件属性

　　HTML4 的新特性之一就是可使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript，在 HTML5 中还增长了一些新的事件属性。浏览器

　　HTML 事件就是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 就能够触发这些事件。HTML 事件能够是浏览器行为，也能够是用户行为。浏览器行为好比：页面加载时触发事件，页面关闭时触发事件等等。用户行为好比：点击按钮触发事件，改变窗口大小触发事件等等。一般，在事件触发时 JavaScript 能够执行一些代码，HTML 元素中能够添加事件属性，使用 JavaScript 代码来添加 HTML 元素。HTML 事件属性能够直接执行 JavaScript 代码，HTML 事件属性能够调用 JavaScript 函数，但一般都是使用 JavaScript 代码来为 HTML 元素绑定事件处理程序。JavaScript 经过事件能够用于处理表单验证，用户输入，用户行为及浏览器动做。网络

　　下面的表格提供了标准的事件属性，能够把它们绑定在 HTML 元素上，以定义事件行为。ide

二、窗口事件属性

　　由窗口触发该事件，适用于 <body> 标签：函数

事件属性	说明
onload	当页面加载完成时运行脚本
onfocus	当窗口得到焦点时运行脚本
onblur	当窗口失去焦点时运行脚本
onbeforeonload　　(H5)	在页面加载以前运行脚本
onunload　　　　(H5)	当用户离开文档时运行脚本
onerror　　　　(H5)	当错误发生时运行脚本
ononline　　　　(H5)	当文档上线时运行脚本
onoffline　　　　(H5)	当文档离线时运行脚本
onhaschange　　(H5)	当文档改变时运行脚本
onundo　　　　(H5)	当文档执行撤销时运行脚本
onmessage　　(H5)	当触发消息时运行脚本
onresize　　　　(H5)	当调整窗口大小时运行脚本
onpageshow　　(H5)	当窗口可见时运行脚本
onpagehide　　(H5)	当窗口隐藏时运行脚本
onpopstate　　(H5)	当窗口历史记录改变时运行脚本
onredo　　　　(H5)	当文档执行再执行操做时运行脚本
onstorage　　　　(H5)	当 Web Storage(网络存储) 区域更新时（存储空间中的数据发生变化时）运行脚本
onbeforeprint　　(H5)	在页面打印以前运行脚本
onafterprint　　(H5)	在页面打印以后运行脚本

三、表单事件属性

　　表单事件在 HTML 表单中触发，适用于全部 HTML 元素, 但该 HTML 元素需在 form 表单内：spa

事件属性	说明
onselect	当选取元素时运行脚本
onchange	当元素改变时运行脚本
onsubmit	当提交表单时运行脚本
onfocus	当元素得到焦点时运行脚本
onblur	当元素失去焦点时运行脚本
onforminput　　(H5)	当表单得到用户输入时运行脚本
oninput　　　　(H5)	当元素得到用户输入时运行脚本
onformchange　　(H5)	当表单改变时运行脚本
oncontextmenu　　(H5)	当触发上下文菜单时运行脚本
oninvalid　　　　　(H5)	当元素无效时运行脚本

四、多媒体事件属性

　　经过图像(image)，音频(audio) 或者视频(video) 触发该事件，多应用于 HTML 媒体元素好比 <img>，<audio>，<video>，<embed> 和 <object>，多媒体元素除了 <img> 和 <object> 以外，其他都是 HTML5 新增长的元素，因此多媒体事件属性也都为新增长的：orm

事件属性	说明
onabort	当发生停止事件时运行脚本
onprogress　　(H5)	当浏览器正在取媒介数据时运行脚本
onloadstart　　(H5)	当浏览器开始加载媒介数据时运行脚本
onerror　　　　(H5)	当在元素加载期间发生错误时运行脚本
onloadeddata　　(H5)	当加载媒介数据时运行脚本
onreadystatechange　　(H5)	当就绪状态(ready-state)改变时运行脚本
onplay　　　　(H5)	当媒介数据将要开始播放时运行脚本
onplaying　　　　(H5)	当媒介数据已开始播放时运行脚本
onpause　　　　(H5)	当媒介数据暂停时运行脚本
onvolumechange　　(H5)	当媒介改变音量亦或当音量被设置为静音时运行脚本
onended　　　　(H5)	当媒介已抵达结尾时运行脚本
oncanplay　　　　(H5)	当媒介可以开始播放但可能因缓冲而须要中止时运行脚本
oncanplaythrough　　(H5)	当媒介可以无需因缓冲而中止便可播放至结尾时运行脚本
ontimeupdate　　(H5)	当媒介改变其播放位置时运行脚本
onwaiting　　(H5)	当媒介已中止播放但打算继续播放时运行脚本
ondurationchange　　(H5)	当媒介长度改变时运行脚本
onratechange　　(H5)	当媒介数据的播放速率改变时运行脚本
onemptied　　(H5)	当媒介资源元素忽然为空时（网络错误、加载错误等）运行脚本
onloadedmetadata　　(H5)	当媒介元素的持续时间以及其余媒介数据已加载时运行脚本
onstalled　　(H5)	当取回媒介数据过程当中（延迟）存在错误时运行脚本
onsuspend　　(H5)	当浏览器已在取媒介数据但在取回整个媒介文件以前中止时运行脚本
onseeked　　(H5)	当媒介元素的定位属性再也不为真且定位已结束时运行脚本
onseeking　　(H5)	当媒介元素的定位属性为真且定位已开始时运行脚本

五、鼠标事件属性

　　经过鼠标触发事件, 模拟用户的行为：视频

事件属性	说明
onclick	当单击鼠标时运行脚本
ondblclick	当双击鼠标时运行脚本
onmouseover	当鼠标移入元素时运行脚本
onmouseout	当鼠标移出元素时运行脚本
onmousemove	当鼠标移动时运行脚本
onmousedown	当按下鼠标按钮时运行脚本
onmouseup	当松开鼠标按钮时运行脚本
onmousewheel　　(H5)	当转动鼠标滚轮时运行脚本
onscroll　　　　(H5)	当滚动元素的滚动条时运行脚本
ondrag　　　　(H5)	当拖动元素时运行脚本
ondragstart　　(H5)	当拖动操做开始时运行脚本
ondragend　　(H5)	当拖动操做结束时运行脚本
ondrop　　　　(H5)	当被拖动元素正在被拖放时运行脚本
ondragover　　(H5)	当元素被拖动至有效拖放目标上方时运行脚本
ondragenter　　(H5)	当元素被拖动至有效的拖放目标时运行脚本
ondragleave　　(H5)	当元素离开有效拖放目标时运行脚本

六、键盘事件属性

　　经过键盘按键触发事件，模拟用户的行为：seo

事件属性	说明
onkeydown	当按下按键时运行脚本
onkeyup	当松开按键时运行脚本
onkeypress	当按下并松开按键时运行脚本

七、其余事件属性

事件属性	说明
onshow　　(H5)	当 <menu> 元素在上下文显示时触发
ontoggle　　(H5)	当用户打开或关闭 <details> 元素时触发