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 ...
随机推荐
- 多目标遗传算法 ------ NSGA-II （部分源码解析） 临时种群生成新父代种群 fillnds.c
/* Nond-domination based selection routines */ # include <stdio.h> # include <stdlib.h> ...
- C#- 操作Ini文件
以前习惯了使用.NET中的WEB.CONFIG或者APP.CONFIG,最近在做项目的时候遇到了些问题,发现没办法使用这些CONFIG文件.一开始我的做法是建一个文本文件,自己定规律,自己写方法去写新 ...
- 错误: 找不到或无法加载主类 / Class not found
Java Resources文件上有红色感叹号存在 说明引入jar包存在错误,把引用错误的jar包去掉即可. 右键项目,Properties,Java Build Path,选中jar包remove, ...
- 哪里有比较全的hadoop视频教程
robby老师讲了套hadoop视频,讲的比的深入浅出,内容很丰富,把网盘下载地址提供给大家一下: 视频下载啦很大,有图有真相: 1,Hadoop介绍,HDFS和MapReduce工作原理:http: ...
- windows 文件名太长无法删除的解决方法
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 实现app上对csdn的文章查看，以及文章中图片的保存 （制作csdn app 完结篇）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24022165 今天给大家带来CSDN的完结篇,即增加文章的查看和文章中图片的保存 ...
- Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果
利用环形渲染我们可以做到什么? 其实很多都是非常常见的,比如上一篇实现的帮帮糖效果, 彩色的热气球,比如这里要讲到的水波纹效果,或者也可以理解为扩散色渲染效果 首先看一下效果图: 轻触屏幕,即可看到对 ...
- RHCA442学习笔记-Unit13网络性能调整
UNIT 13 Essential Network Tuning 网络性能调整 目标:1. 应用队列技术最大化网络吞吐量 2. 调整TCP和non-TCP网络soc ...
- Multipart Upload with HttpClient 4--reference
by Eugen Paraschiv on May 23, 2014 in HttpClient http://www.baeldung.com/httpclient-multipart-upload ...
- PHP读书笔记（1）-PHP语法结构与变量
一 .php基础语法 1.php语法结构 标准风格:<?php code; ?>.PHP每句代码用;(分号)结尾.<---就用这个,其他的看看就可以了 短风格:<? code; ...