html事件是用户和页面交互的一些效果 ，用户通过点击，触摸等等方式更新数据，页面在加载完成之后的交互效果就需要通过触发事件来完成，事件大概分为，鼠标事件，窗口事件，表单事件，键盘事件，媒体事件等
HTML事件
窗口事件（window事件）
| 属性 | 值 | 描述 |
| onafterprint | script | 在打印文档之后运行脚本。 |
| onbeforeprint | script | 在文档打印之前运行脚本。 |
| onbeforeonload | script | 在文档加载之前运行脚本。 |
| onblur | script | 当窗口失去焦点时运行脚本。 |
| onerror | script | 当错误发生时运行脚本 |
| onfocus | script | 当窗口获得焦点时运行脚本 |
| onhashchange | script | 当文档改变时运行脚本 |
| onload | script | 当文档加载时运行脚本 |
| onmessage | script | 当触发消息时运行脚本 |
| onoffline | script | 当文档离线时运行脚本 |
| ononline | script | 当文档上线时运行脚本 |
| onpagehide | script | 当窗口隐藏时运行脚本 |
| onpageshow | script | 当窗口可见时运行脚本 |
| onpopstate | script | 当窗口历史记录改变时运行脚本 |
| onredo | script | 当文档执行再执行操作（redo）时运行脚本 |
| onresize | script | 当调整窗口大小时运行脚本 |
| onstorage | script | 当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本 |
| onundo | script | 当文档执行撤销时运行脚本 |
| onunload | script | 当用户离开文档时运行脚本 |
常用的事件有哪些
load 和 unload 事件：
load 事件一般用于对页面进行初始化，它在页面完全载入后发生（注意：在页面完全载入前任何DOM操作都是不能进行的）。使用 load 事件可以执行那些一打开网页就需要执行的代码。load 事件一般在 <body> 标签中处理，但它实际上是由 window 对象处理的；
unload 事件在页面卸载时发生，如单击超链接打开另一个页面、使用前进/后退按钮、关闭浏览器窗口时会触发该事件。unload 事件也是由 window 对象处理的，一般也在 <body> 标签中调用
resize 事件：
resize 事件窗口或框架的大小被调整时发生，包括最小化、最大化。在IE和Opera浏览器中，只要窗口边框被拖动，就触发该事件，在Mozilla浏览器中，resize 事件只是在停止改变窗口大小时才会触发。resize 事件也是由 window 对象处理的
表单事件（from事件）
| 属性 | 值 | 描述 |
| onblur | script | 当元素失去焦点时运行脚本 |
| onchange | script | 当元素改变时运行脚本 |
| oncontextmenu | script | 当触发上下文菜单时运行脚本 |
| onfocus | script | 当元素获得焦点时运行脚本 |
| onformchange | script | 当表单改变时运行脚本 |
| onforminput | script | 当表单获得用户输入时运行脚本 |
| oninput | script | 当元素获得用户输入时运行脚本 |
| oninvalid | script | 当元素无效时运行脚本 |
| onselect | script | 当选取元素时运行脚本 |
| onsubmit | script | 当提交表单时运行脚本 |
表单事件中常用的事件有
onblur：当鼠标离开输入框时触发，常用于input输入框内容判定，window也可以监听此事件
onfocus：当鼠标进入输入范围内触发，也可以用于内容判断，window可以监听此事件
键盘事件（keyboard事件）
用户行为
| 属性 | 值 | 描述 |
|---|---|---|
| onkeydown | script | 当按下按键时运行脚本。 |
| onkeypress | script | 当按下并松开按键时运行脚本。 |
| onkeyup | script | 当松开按键时运行脚本。 |
window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件
鼠标事件（mouse事件）
通过用户操作鼠标来 触发事件
| 属性 | 值 | 描述 |
| onclick | script | 当单击鼠标时运行脚本 |
| ondblclick | script | 当双击鼠标时运行脚本 |
| ondrag | script | 当拖动元素时运行脚本 |
| ondragend | script | 当拖动操作结束时运行脚本 |
| ondragenter | script | 当元素被拖动至有效的拖放目标时运行脚本 |
| ondragleave | script | 当元素离开有效拖放目标时运行脚本 |
| ondragover | script | 当元素被拖动至有效拖放目标上方时运行脚本 |
| ondragstart | script | 当拖动操作开始时运行脚本 |
| ondrop | script | 当被拖动元素正在被拖放时运行脚本 |
| onmousedown | script | 当按下鼠标按钮时运行脚本 |
| onmousemove | script | 当鼠标指针移动时运行脚本 |
| onmouseout | script | 当鼠标指针移出元素时运行脚本 |
| onmouseover | script | 当鼠标指针移至元素之上时运行脚本 |
| onmouseup | script | 当松开鼠标按钮时运行脚本 |
| onmousewheel | script | 当转动鼠标滚轮时运行脚本 |
| onscroll | script | 当滚动元素的滚动条时运行脚本 |
鼠标事件比较常用，window、document 也可监听该事件, Element 元素可以通过设置防止冒泡来阻止 window 事件
媒体事件（media事件）
通过视频（videos），图像（images）或音频（audio） 触发该事件
| 属性 | 值 | 描述 |
| onabort | script | 当发生中止事件时运行脚本 |
| oncanplay | script | 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本 |
| oncanplaythrough | script | 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本 |
| ondurationchange | script | 当媒介长度改变时运行脚本 |
| onemptied | script | 当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本 |
| onended | script | 当媒介已抵达结尾时运行脚本 |
| onerror | script | 当在元素加载期间发生错误时运行脚本 |
| onloadeddata | script | 当加载媒介数据时运行脚本 |
| onloadedmetadata | script | 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本 |
| onloadstart | script | 当浏览器开始加载媒介数据时运行脚本 |
| onpause | script | 当媒介数据暂停时运行脚本。 |
| onplay | script | 当媒介数据将要开始播放时运行脚本 |
| onplaying | script | 当媒介数据已开始播放时运行脚本。 |
| onprogress | script | 当浏览器正在取媒介数据时运行脚本 |
| onratechange | script | 当媒介数据的播放速率改变时运行脚本 |
| onreadystatechange | script | 当就绪状态（ready-state）改变时运行脚本。 |
| onseeked | script | 当媒介元素的定位属性不再为真且定位已结束时运行脚本。 |
| onseeking | script | 当媒介元素的定位属性为真且定位已开始时运行脚本。 |
| onstalled | script | 当取回媒介数据过程中（延迟）存在错误时运行脚本。 |
| onsuspend | script | 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本。 |
| ontimeupdate | script | 当媒介改变其播放位置时运行脚本。 |
| onvolumechange | script | 当媒介改变音量亦或当音量被设置为静音时运行脚本。 |
| onwaiting | script | 当媒介已停止播放但打算继续播放时运行脚本 |
其他事件
| 属性 | 值 | 描述 |
|---|---|---|
| onshow | script | 当 <menu> 元素在上下文显示时触发。 |
| ontoggle | script | 当用户打开或关闭 <details> 元素时触发。 |
HTML事件三要素
事件三要素、事件机制、事件的相关操作
事件的三要素：
(1)事件源、就是你点的那个div，触发的对象
(2)事件、表示动作，比如点击、滑过等
(3)事件处理函数、表示结果，比如点开关跳转到另一个页面
事件机制
事件机制：
(1)事件冒泡、会从最里面的节点开始一层一层的向外面冒泡
(2)事件捕获、与冒泡相反，从最外面的那一层开始一层一层向里面捕获事件
如果既有捕获又有冒泡，那么先捕获、后冒泡
IE浏览器不支持捕获
