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 ...
随机推荐
- 前端javascript规范文档 （http://www.xuanfengge.com/category/web）
说明:本文档为前端JS规范 一.规范目的 为提高团队协作效率,便于前端后期优化维护,输出高质量的文档. 二.基本准则 符合web标准,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序, ...
- 二叉树可视化--Graphviz
大家平时写C程序有没有种把内存里的数据结构全给画出来的冲动呢?数据量小的话,画起来还蛮简单,用viso,我前面的文章都用viso画的.之前写红黑树代码的时候,用的是命令行把整个树打印出来,不过只是一些 ...
- MP3的频率、比特率、码率与音质的关系
想知道MP3的频率.比特率.码率与音质的关系,是不是频率越高,码率越高,音质就越好.好像MP3大多数的频率都是44100HZ的.码率有128,192等等. 这里所说的频率是採样率,一般都是44100K ...
- mysql监控管理工具--innotop
https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/innotop/innotop-1.9. ...
- 非spring环境中配置文件工具
http://commons.apache.org/proper/commons-configuration/ 注意:属性的值使用","分割,会造成读取属性值不正确的问题.建议使用 ...
- 配置servers时，错误：Setting property 'source' to 'org.eclipse.jst.jee.server:hczm' did not find a matching property
WARNING: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to 'org.e ...
- Java immutable class
可变类:类的实例创立之后,还可以修改这个实例的内容. 比如创建一个3*3的矩阵,如果设立了set function,在main中可以用set更改对应位置元素的大小. 不可变类:就是类的实例一旦被建立, ...
- 对于POI的XSSFCell 类型问题
1.XSSFCell.CELL_TYPE_BLANK 2.XSSFCell.CELL_TYPE_BOOLEAN 取值方式:cell.getBooleanCellValue() 3.XSSFCell.C ...
- 20160322 javaweb 之jdbc-- mysql 批处理
package com.dzq.batch; import java.sql.Connection; import java.sql.Statement; import com.itheima.uti ...
- FastFrameWork 快速开发框架
前言 FastFrameWork 快速开发框架是一款基于敏捷并行开发思想和Microsoft .Net构件(插件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市场快速变化的 ...