HTML5中的事件属性为开发者提供了一种在用户与网页交互时触发特定行为的强大工具,这些事件属性不仅增强了网页的互动性,还使得用户体验更加丰富和动态,以下是对HTML5中主要事件属性的详细解析。
Window 事件属性
1、onafterprint: 当打印文档之后运行脚本。
2、onbeforeprint: 在打印文档之前运行脚本。
3、onbeforeonload: 在文档加载之前运行脚本。
4、onblur: 当窗口失去焦点时运行脚本。
5、onerror: 当错误发生时运行脚本。
6、onfocus: 当窗口获得焦点时运行脚本。
7、onhaschange: 当文档改变时运行脚本。
8、onload: 当文档加载时运行脚本。
9、onmessage: 当触发消息时运行脚本。
10、onoffline: 当文档离线时运行脚本。
11、ononline: 当文档上线时运行脚本。
12、onpagehide: 当窗口隐藏时运行脚本。
13、onpageshow: 当窗口可见时运行脚本。
14、onpopstate: 当窗口历史记录改变时运行脚本。
15、onredo: 当文档执行再执行操作(redo)时运行脚本。
16、onresize: 当调整窗口大小时运行脚本。
17、onstorage: 当Web Storage区域更新时(存储空间中的数据发生变化时)。
18、onundo: 当文档执行撤销操作时运行脚本。
19、onunload: 当用户离开文档时运行脚本。
表单事件
1、onblur: 当元素失去焦点时运行脚本。
2、onchange: 当元素改变时运行脚本。
3、oncontextmenu: 当触发上下文菜单时运行脚本。
4、onfocus: 当元素获得焦点时运行脚本。
5、onformchange: 当表单改变时运行脚本。
6、onforminput: 当表单获得用户输入时运行脚本。
7、oninput: 当元素获得用户输入时运行脚本。
8、oninvalid: 当元素无效时运行脚本。
9、onreset: 当表单重置时运行脚本(HTML5不支持)。
10、onselect: 当选取元素时运行脚本。
11、onsubmit: 当提交表单时运行脚本。
键盘事件
1、onkeydown: 当按下按键时运行脚本。
2、onkeypress: 当按下并松开按键时运行脚本。
3、onkeyup: 当松开按键时运行脚本。
鼠标事件
1、onclick: 当单击鼠标时运行脚本。
2、ondblclick: 当双击鼠标时运行脚本。
3、ondrag: 当拖动元素时运行脚本。
4、ondragend: 当拖动操作结束时运行脚本。
5、ondragenter: 当元素被拖动至有效的拖放目标时运行脚本。
6、ondragleave: 当元素离开有效拖放目标时运行脚本。
7、ondragover: 当元素被拖动至有效拖放目标上方时运行脚本。
8、ondragstart: 当拖动操作开始时运行脚本。
9、ondrop: 当被拖动元素正在被拖放时运行脚本。
10、onmousedown: 当按下鼠标按钮时运行脚本。
11、onmousemove: 当鼠标指针移动时运行脚本。
12、onmouseout: 当鼠标指针移出元素时运行脚本。
13、onmouseover: 当鼠标指针移至元素之上时运行脚本。
14、onmouseup: 当松开鼠标按钮时运行脚本。
15、onmousewheel: 当转动鼠标滚轮时运行脚本。
16、onscroll: 当滚动元素滚动元素的滚动条时运行脚本。
媒介事件
1、onabort: 当发生中止事件时运行脚本。
2、oncanplay: 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本。
3、oncanplaythrough: 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本。
4、ondurationchange: 当媒介长度改变时运行脚本。
5、onemptied: 当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本。
6、onended: 当媒介已抵达结尾时运行脚本。
7、onerror: 当在元素加载期间发生错误时运行脚本。
8、onloadeddata: 当加载媒介数据时运行脚本。
9、onloadedmetadata: 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本。
10、onloadstart: 当浏览器开始加载媒介数据时运行脚本。
11、onpause: 当媒介数据暂停时运行脚本。
12、onplay: 当媒介数据将要开始播放时运行脚本。
13、onplaying: 当媒介数据已开始播放时运行脚本。
14、onprogress: 当浏览器正在取媒介数据时运行脚本。
15、onratechange: 当媒介数据的播放速率改变时运行脚本。
16、onreadystatechange: 当就绪状态(readystate)改变时运行脚本。
17、onseeked: 当媒介元素的定位属性不再为真且定位已结束时运行脚本。
18、onseeking: 当媒介元素的定位属性为真且定位已开始时运行脚本。
19、onstalled: 当取回媒介数据过程中(延迟)存在错误时运行脚本。
20、onsuspend: 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本。
21、ontimeupdate: 当媒介改变其播放位置时运行脚本。
22、onvolumechange: 当媒介改变音量亦或当音量被设置为静音时运行脚本。
23、onwaiting: 当媒介已停止播放但打算继续播放时运行脚本。
HTML5的事件属性极大地丰富了网页的交互能力,使开发者能够创建更加动态和响应式的网页应用,通过合理利用这些事件属性,可以提升用户的体验,实现更加复杂的功能和效果。
HTML5 中事件属性简介
在 HTML5 中,事件属性是用来为 HTML 元素添加事件监听器的属性,以下是一些常用的事件属性及其简要说明:
这些事件属性在 HTML 元素中直接使用,可以与 JavaScript 函数或内联 JavaScript 代码结合使用,以实现特定的交互效果。