HTML 4 增加了使事件在浏览器中触发动作的能力，比如当用户点击元素时启动 JavaScript。
下面列出了添加到 HTML 元素以定义事件动作的全局事件属性。
一.【Window 事件属性】
针对 window 对象触发的事件（应用到 <body> 标签）：
（1）onafterprint【H5新标签】 文档打印之后运行的脚本
【兼容：只有IE和火狐Firefox支持】
<script>
function printmsg(){
alert("此文档现在正在打印！");
}
</script>
<body onafterprint="printmsg()">
</body>
注释：在 IE 中，onafterprint 属性在打印对话框出现之前而不是之后发生
（2）onbeforeprint【H5新标签】 文档打印之前运行的脚本
【兼容：只有IE和火狐Firefox支持】
<script>
function printmsg(){
alert("即将打印该文档！");
}
</script>
<body onbeforeprint="printmsg()">
</body>
（3）onbeforeunload【H5新标签】 文档卸载之前运行的脚本
（4）onerror【H5新标签】 在错误发生时运行的脚本
（5）onhaschange【H5新标签】 当文档已改变时运行的脚本
（6）onload 页面结束加载之后触发
onload 常用在 <body> 中，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。
<script>
function load(){
alert("页面已加载！");
}
</script>
<body onload="load()">
<h1>Hello World!</h1>
</body>
（7）onmessage【H5新标签】 在消息被触发时运行的脚本
（8）onoffline【H5新标签】 当文档离线时运行的脚本
（9）ononline【H5新标签】 当文档上线时运行的脚本
（10）onpagehide【H5新标签】 当窗口隐藏时运行的脚本
（11）onpageshow【H5新标签】 当窗口成为可见时运行的脚本
（12）onpopstate【H5新标签】 当窗口历史记录改变时运行的脚本
（13）onredo【H5新标签】 当文档执行撤销（redo）时运行的脚本
（14）onresize【H5新标签】 当浏览器窗口被调整大小时触发
【兼容：所有主流浏览器都支持 onresize 属性】
使用场景：onresize 发生于对象被调整大小时，常用于 浏览器窗口被调整尺寸时
<script>
function showMsg(){
alert("您已改变浏览器窗口的尺寸！");
}
</script>
<body onresize="showMsg()">
<p>请试着调整浏览器窗口的大小。</p>
</body>
【注意：】不同浏览器有不同对应情况，经测试谷歌响应1次，IE响应2次
（15）onstorage【H5新属性】 在 Web Storage（Web存储） 区域更新后运行的脚本
（16）onundo【H5新属性】 在文档执行 undo（解压） 时运行的脚本
（17）onunload 一旦页面已下载时触发（或者浏览器窗口已被关闭）
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>教程</title>
<head>
<script>
function goodbye(){
alert("感谢你访问教程");
}
</script>
</head>
<body onunload="goodbye()">
<h1>欢迎访问我的主页</h1>
<p>关闭窗口或者按 F5 刷新页面。</p>
</body>
</html> ①onunload 属性在用户关闭一个页面时触发
②onunload 在用户离开页面(通过点击链接，提交表单，关闭浏览器窗口等)触发
【注意】： 如果你重新载入页面，unload 事件将被触发( onload 事件)
二.【Form 事件】
由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：
（1）onblur 在元素失去焦点时触发，常用于表单验证代码（例如用户离开表单字段），与onfocus聚焦属性相反
（2）onchange 在元素值被改变时运行
适用于：<input>、<textarea> 以及 <select> 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本改动</title>
<script>
function checkField(val) {
alert("输入值已更改。新值是：" + val);
}
</script>
</head>
<body>
<p>请修改输入字段中的文本，然后在字段外点击以触发 onchange。</p>
请输入文本：<input type="text" name="txt" value="Hello" onchange="checkField(this.value)">
</body>
</html>
（3）oncontextmenu（H5新事件） 当上下文菜单被触发时运行的脚本
（4）onfocus 当元素获得焦点时运行
onfocus 常用于 <input>、<select> 以及 <a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聚焦变色</title>
<script>
function setStyle(x) {
document.getElementById(x).style.background="yellow";
}
</script>
</head>
<body>
<p>当输入字段获得焦点时触发函数。此函数改变输入字段的背景色。</p>
姓: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
名: <input type="text" id="lname" onfocus="setStyle(this.id)">
</body>
</html>
【注释】：onfocus 属性不适用于以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>
（5）onformchange【H5新标签】 在表单改变时运行
（6）onforminput【H5新标签】 当表单获得用户输入时运行
（7）oninput【H5新标签】 当元素获得用户输入时运行
（8）oninvalid 【H5新标签】 当元素无效时运行
（9）onreset【H5新标签】 当表单中的重置按钮被点击时触发（H5不支持）
（10）onselect 在元素中文本被选中后触发，是当你选择文本内容是而触发的事件，例如Tab键切换到该输入框时弹框提示
<input type="text" value="你好!" onselect="alert('你选择了莫些文字')">
【注意】：经测试，只有首次选中才会触发
可用于以下元素内：<input type="file">、<input type="password">、<input type="text">、<keygen> 以及 <textarea>
（11）onsubmit 在提交表单时触发
<script>
function checkForm(){
alert("表单已提交！");
}
</script>
<form onsubmit="checkForm()">
姓：<input type="text" name="lname"><br>
名：<input type="text" name="fname"><br>
<input type="submit" value="提交">
<p>函数 checkForm() 在提交按钮被点击时触发。此函数向用户显示一段消息。</p>
三.【Keyboard（键盘）事件】
【顺序】：相对于 onkeydown 事件的事件次序：
onkeydown（按下按键）--- onkeypress（敲击按钮）--- onkeyup（释放按钮）
（1）onkeydown 在用户按下按键时触发，在用户（在键盘上）按键时触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
</head>
<body>
<p>当用户在输入字段中按下按键时触发函数。此函数提示用户已按按键。</p>
<input type="text" onkeydown="displayResult()">
<script>
function displayResult() {
var x;
if(window.event){// IE8 以及更早版本
x=event.keyCode;
}else if(event.which){ // IE9/Firefox/Chrome/Opera/Safari
x=event.which;
}
var keychar=String.fromCharCode(x);
alert("按键 " + keychar + " 被按下");
}
</script>
</body>
</html>
注释：onkeydown 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>
（2）onkeypress 在用户（在键盘上）按键时触发
【注释】：
①在任何浏览器中，onkeypress 事件不会被所有按键触发（例如 ALT、CTRL、SHIFT、ESC）
②onkeypress 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>
（3）onkeyup 当用户释放按键时触发
用法和适用性与onkeypress（按键）事件相同
四.【Mouse（鼠标）事件】
由鼠标或类似用户动作触发的事件：
（1）onclick 元素上发生鼠标点击时触发
（2）ondblclick 元素上发生鼠标双击时触发
{《鼠标拖拽事件》}
（3）鼠标拖拽事件相关【H5新事件】：
ondrag 元素被拖动时运行
ondragend 在拖动操作末端运行
ondragenter 当元素元素已被拖动到有效拖放区域时运行
ondragleave 当元素离开有效拖放目标时运行
ondragover 当元素在有效拖放目标上正在被拖动时运行
ondragstart 在拖动操作开端运行
ondrop 当被拖元素正在被拖放时运行
{《鼠标按钮点击事件》}
（4）鼠标按钮点击事件：
onmouseup 松开鼠标按钮时触发
onmousedown 按下鼠标按钮时触发
①鼠标左/中键（事件顺序）：onmousedown---onmouseup---onclick
②限于鼠标右键（事件顺序）：onmousedown---onmouseup---oncontextmenu【右击菜单】
【注释】：onmouseup和onmousedown属性不适用于以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>
{《鼠标滑过事件》}
（5）鼠标滑过事件：
onmousemove当鼠标移动的时候触发
onmouseover 当鼠标经过的时候触发
onmouseout 当鼠标离开的时候触发
（6）onmousewheel【H5新标签】 当鼠标滚轮正在被滚动时运行
（7）onscroll【H5新标签】 当元素滚动条被滚动时运行
JavaScript onscroll 事件：
当浏览器滚动条滚动时会触发 onscroll 事件，通常情况下指上下滚动条滚动。
需要注意的是，浏览器一旦检测到滚动条发生滚动，就可以触发 onscroll 事件，而无需等到滚动行为结束。
【例子】下面的例子演示了一个极普遍的应用：利用 onscroll 事件检测滚动条位置，当向下滚动到一定位置时，在页面右下角会出现“返回顶部”的锚链接，以方便网站用户快速返回顶部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚轮事件</title>
<style type="text/css">
#top_div{
position:fixed;
bottom:80px;
right:0;
display:none;
}
hr{
margin: 200px 0;
}
</style>
<script>
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
var top_div = document.getElementById( "top_div" );
if( t >= 300 ) {
top_div.style.display = "inline";
} else {
top_div.style.display = "none";
}
}
</script>
</head>
<body>
<a name="top">顶部</a>
<hr>
<div id="top_div"><a href="#top">返回顶部</a></div>
<hr>
<hr>
<hr>
<hr>
<hr>
</body>
</html>
五.【Media（媒体）事件】
由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:
（1）onabort 在退出时运行
（2）oncanplay【H5新属性】 当文件就绪可以开始播放时运行（缓冲已足够开始时）
（3）oncanplaythrough【H5新属性】 当媒介能够无需因缓冲而停止即可播放至结尾时运行
（4）ondurationchange【H5新属性】 当媒介长度改变时运行
（5）onemptied【H5新属性】 当发生故障并且文件突然不可用时运行（比如连接意外断开时）
（6）onended【H5新属性】 当媒介已到达结尾时运行（可发送类似“感谢观看”之类的消息）
（7）onerror【H5新属性】 当在文件加载期间发生错误时运行
（8）onloadeddata【H5新属性】 当媒介数据已加载时运行
（9）onloadedmetadata【H5新属性】 当元数据（比如分辨率和时长）被加载时运行
（10）onloadstart【H5新属性】 在文件开始加载且未实际加载任何数据前运行
（11）onpause【H5新属性】 当媒介被用户或程序暂停时运行
（12）onplay【H5新属性】 当媒介已就绪可以开始播放时运行
（13）onplaying【H5新属性】 当媒介已开始播放时运行
（14）onprogress【H5新属性】 当浏览器正在获取媒介数据时运行
（15）onratechange【H5新属性】 每当回放速率改变时运行（比如当用户切换到慢动作或快进模式）
（16）onreadystatechange【H5新属性】 每当就绪状态改变时运行（就绪状态监测媒介数据的状态）
（17）onseeked【H5新属性】 当 seeking（需求）属性设置为 false（指示定位已结束）时运行
（18 ）onseeking【H5新属性】 当 seeking 属性设置为 true（指示定位是活动的）时运行
（19）onstalled【H5新属性】 在浏览器不论何种原因未能取回媒介数据时运行
（20）onsuspend【H5新属性】 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行
（21）ontimeupdate【H5新属性】 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行
（22）onvolumechange【H5新属性】 每当音量改变时（包括将音量设置为静音）时运行
（23）onwaiting 当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行
.