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 ...
随机推荐
- Linq-表达式常用写法
这里主要是将数据库中的常用操作用LAMBDA表达式重新表示了下,用法不多,但相对较常用,等有时间了还会扩展,并将查询语句及LINQ到时也一并重新整理下:1.select语句:books.Select( ...
- Apache Mina 2.x 框架+源码分析
源码下载 http://www.apache.org/dyn/closer.cgi/mina/mina/2.0.9/apache-mina-2.0.9-src.tar.gz 整体架构 核心过程(IoA ...
- CenOS搭建FTP服务器
CenOS搭建FTP服务器 -------------------------------------------------------------------------准备工作--------- ...
- python的memcache使用如果对key设置了一个int型
如果对key设置了int型,会出现不可预知的错误,这个问题纠结了我好久,最终还是加了个str(),切忌切忌
- [AngularJS] angular-formly: Default Options
angular-formly allows you to keep your forms as DRY as possible. TheoptionsTypes property is one way ...
- BeagleBone Black Linux驱动程序开发入门（1）： LED驱动程序
这篇文章展示如何在BBB平台上编写LED驱动程序,本文的程序是根据国嵌S3C2440的LED驱动的例子并结合内核中OMAP系列的gpio操作来改的.本文中的程序包括驱动程序模块和用户空间程序.废话不多 ...
- Android开发之IPC进程间通信-AIDL介绍及实例解析
一.IPC进程间通信 IPC是进程间通信方法的统称,Linux IPC包括以下方法,Android的进程间通信主要采用是哪些方法呢? 1. 管道(Pipe)及有名管道(named pipe):管道可用 ...
- Linux学习新篇——常用命令和快捷键总结
最近刚接触Linux,整理了一些常用的命令和快捷键 Tab补全命令 当命令记不清了,输入记得的前几个用Tab就可以将该命令自动补全. 启动tomcat服务用$startup.sh 停止tomcat服务 ...
- 理解Objective-c中的copy
说一下深拷贝和浅拷贝的基本概念:a指针指向地址A1, 浅拷贝是创建了一个b指针指向地址A1:深拷贝是创建了一个c指针指向地址A2,A1和A2的地址不同. 我们看到NSObject接口里面是已经声明了c ...
- magento 常用方法集锦
1,获得store的配置变量 Mage::getStoreConfig('sectionname/groupname/fields'); 1 Mage::getStoreConfig('section ...