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 ...
随机推荐
- Linux为Tomecat指定JDK
在搭建Jenkin+Sonar集成时,由于系统环境配置了jdk1.7,但是jenkins在安装sonar的插件时,需要jdk1.8.,所以需要在Tomcat指定jdk1.8. (1)暂停Tomcat ...
- SGU107——987654321 problem
For given number N you must output amount of N-digit numbers, such, that last digits of their square ...
- Node.js初级
package.json文件字段说明 name:包名.包名是唯一的,只能包含小写字母.数字和下划线. version:包版本号. description:包说明. keywords:关键字数组.用于搜 ...
- CAS SSO对手机应用支持的一种思路
原文地址: http://architecture3.riaos.com/?p=3095368 手机和桌面应用访问CAS,我们不能直接使用CAS提供的web api.不过CAS提供了一个插件,叫CAS ...
- jquery如何让滚动条默认在最底部
$(document).ready(function() { $("#content").scrollTop($("#content")[0].offsetHe ...
- Openstack中间DVR Part1 -- 东西走向的交通处理
作者:Liping Mao 发表于:2014-07-04 版权声明:能够随意转载.转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 在Openstack中L3router会造成流量集中 ...
- c++制作小游戏--雷电
用c++实现了一个小游戏--雷电,貌似执行的还不错.贴图和声效也是Duang!Duang!的.整个项目我也会给出下载链接,有兴趣的能够编译执行一下.用到了C++11的新特性,最好是使用vs2013编译 ...
- careercup-递归和动态规划 9.2
9.2 设想有个机器人坐在X*Y网格的左上角,只能向右.向下移动.机器人从(0,0)到(X,Y)有多少种走法? 进阶: 假设有些点为“禁区”,机器人不能踏足.设计一种算法,找到一条路径,让机器人从左上 ...
- android学习资料
在线查看android源码 1. https://github.com/android 2. http://grepcode.com/project/repository.grepcode.com ...
- String sql = "update web_admin set adminname=? ,password=? where id=?;怎么给“？” 传值？
PreparedStatement pstmt = con.prepareStatement("UPDATE EMPLOYEES ...