HTML 事件
1、HTML 全局事件属性
HTML4 的新特性之一就是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript，在 HTML5 中还增加了一些新的事件属性。
HTML 事件就是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 就可以触发这些事件。HTML 事件可以是浏览器行为，也可以是用户行为。浏览器行为比如：页面加载时触发事件，页面关闭时触发事件等等。用户行为比如：点击按钮触发事件，改变窗口大小触发事件等等。通常，在事件触发时 JavaScript 可以执行一些代码，HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。HTML 事件属性可以直接执行 JavaScript 代码，HTML 事件属性可以调用 JavaScript 函数，但通常都是使用 JavaScript 代码来为 HTML 元素绑定事件处理程序。JavaScript 通过事件可以用于处理表单验证，用户输入，用户行为及浏览器动作。
下面的表格提供了标准的事件属性，可以把它们绑定在 HTML 元素上，以定义事件行为。
2、窗口事件属性
由窗口触发该事件，适用于 <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) | 在页面打印之后运行脚本 |
3、表单事件属性
表单事件在 HTML 表单中触发 ，适用于所有 HTML 元素, 但该 HTML 元素需在 form 表单内：
| 事件属性 | 说明 |
| onselect | 当选取元素时运行脚本 |
| onchange | 当元素改变时运行脚本 |
| onsubmit | 当提交表单时运行脚本 |
| onfocus | 当元素获得焦点时运行脚本 |
| onblur | 当元素失去焦点时运行脚本 |
| onforminput (H5) | 当表单获得用户输入时运行脚本 |
| oninput (H5) | 当元素获得用户输入时运行脚本 |
| onformchange (H5) | 当表单改变时运行脚本 |
| oncontextmenu (H5) | 当触发上下文菜单时运行脚本 |
| oninvalid (H5) | 当元素无效时运行脚本 |
4、多媒体事件属性
通过图像(image)，音频(audio) 或者 视频(video) 触发该事件，多应用于 HTML 媒体元素比如 <img>，<audio>，<video>，<embed> 和 <object>，多媒体元素除了 <img> 和 <object> 之外，其余都是 HTML5 新增加的元素，所以多媒体事件属性也都为新增加的：
| 事件属性 | 说明 |
| 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) | 当媒介元素的定位属性为真且定位已开始时运行脚本 |
5、鼠标事件属性
通过鼠标触发事件, 模拟用户的行为：
| 事件属性 | 说明 |
| 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) | 当元素离开有效拖放目标时运行脚本 |
6、键盘事件属性
通过键盘按键触发事件，模拟用户的行为：
| 事件属性 | 说明 |
| onkeydown | 当按下按键时运行脚本 |
| onkeyup | 当松开按键时运行脚本 |
| onkeypress | 当按下并松开按键时运行脚本 |
7、其他事件属性
| 事件属性 | 说明 |
| onshow (H5) | 当 <menu> 元素在上下文显示时触发 |
| ontoggle (H5) | 当用户打开或关闭 <details> 元素时触发 |
HTML 事件的更多相关文章
- JNI详解---从不懂到理解
转载:https://blog.csdn.net/hui12581/article/details/44832651 Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 C ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 关于 Chrome 浏览器中 onresize 事件的 Bug
我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 ...
- MVVM设计模式和WPF中的实现（四）事件绑定
MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- C++中的事件分发
本文意在展现一个C++实现的通用事件分发系统,能够灵活的处理各种事件.对于事件处理函数的注册,希望既能注册到普通函数,注册到事件处理类,也能注册到任意类的成员函数.这样在游戏客户端的逻辑处理中,可以非 ...
- 移动端IOS点击事件失效解决方案
解决方案 解决办法有 4 种可供选择: 1 将 click 事件直接绑定到目标元素(即 .target)上 2 将目标元素换成 <a> 或者 button 等可点击的元素 3 将 clic ...
- Android笔记——Button点击事件几种写法
Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...
- HTML 事件(一) 事件的介绍
本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...
- HTML 事件(二) 事件的注册与注销
本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...
- HTML 事件(三) 事件流与事件委托
本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...
随机推荐
- iOS开发：创建真机调试证书
关于苹果iOS开发,笔者也是从小白过来的,经历过各种困难和坑,其中就有关于开发证书,生产证书,in_house证书,add_Hoc证书申请过程中的问题,以及上架发布问题.今天就着重说一下关于针对于苹果 ...
- 2014上海全国邀请赛题解 HDOJ 5090-5099
HDOJ 5090 水题.从小到大排序,能够填充达到符合条件的.先填充好.填充之后进行调整. 传送门:pid=5090">点击打开链接 #include <cstdio> ...
- Dreamweaver中清除php代码中多余空行的方法
使用DW自带的搜索功能,利用正则表达式 使用正则表达式搜索:\r\n\s*\r\n即可搜到代码中的空行,再用回车符\n替换即可消除代码中的多余空行
- gshop.data 编辑器通杀版本 支持146-151版本
EXE下载:http://files.cnblogs.com/xe2011/EXEgshop.dataeditorV1.42014-3-11-204242.7z C#:http://files.cnb ...
- iOS开发多线程篇---atomic nonatomic区别
摘要 atomic和nonatomic区别用来决定编译器生成的getter和setter是否为原子操 作.atomic提供多线程安全,是描述该变量是否支持多线程的同步访问,如果选择了atomic 那么 ...
- oc学习笔记2
.oc中的BOOL类型 oc中的BOOL类型的值为YES和NO,有点小奇怪 在oc中YES不等于1,但是NO一定等于0,所以不要把1和YES来比较 .消息发送 在oc中,经常使用这样的术语:将allo ...
- Xcode 4-PBXcp error修复-No such file or directory
Xcode 4-PBXcp error修复-No such file or directory (2013-05-02 15:20:50) 转载▼ 标签: apple iphone ios 移动开发 ...
- 深入理解计算机系统第二版习题解答CSAPP 2.1
A.将0x39A7F8转换为二进制. 0011 1001 1010 0111 1111 1000 B.将二进制1100 1001 0111 1011转换为十六进制. 0xC97B C.将0xD5E ...
- Js 学习资料
Js 语法 http://www.php100.com/manual/jquery/ jqGrid控件 http://www.trirand.com/blog/jqgrid/jqgrid.html
- web.config详解(配置文件节点说明)
转载:http://www.zzzj.com/html/20081110/67614.html web.config文件是一个XML文件,它的根结点是<configuration>,在&l ...