DOM模型（七）—— 事件类型
本节介绍各种常见的浏览器事件。
一、鼠标事件
鼠标事件指与鼠标相关的事件，主要有以下一些。
1.1、click事件，dblclick事件
当用户在Element节点，document节点，window对象上单击鼠标（或按下回车键）时，click事件触发。
“鼠标单击”定义为，用户在同一位置完成一次mousedown动作和mouseup动作。它们的触发顺序是：mousedown首先触发，mouseup接着触发，click最后触发。
下面是一个设置click事件监听函数的例子。
div.addEventListener("click", function( event ) {
// 显示在该节点，鼠标连续点击的次数
event.target.innerHTML = "click count: " + event.detail;
}, false);
dblclick事件当用户在element、document、window对象上，双击鼠标时触发。该事件在mousedown、mouseup、click之后触发。
1.2、mouseup事件，mousedown事件，mousemove事件
mousedown事件在按下鼠标键时触发。
mouseup事件在释放按下的鼠标键时触发。
mousemove事件当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次代码。
1.3、mouseover事件，mouseenter事件
mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。
两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。
// HTML代码为
// <ul id="test">
// <li>item 1</li>
// <li>item 2</li>
// <li>item 3</li>
// </ul>
var test = document.getElementById('test');
// 进入test节点以后，该事件只会触发一次
// event.target 是 ul 节点
test.addEventListener('mouseenter', function (event) {
event.target.style.color = 'purple';
setTimeout(function () {
event.target.style.color = '';
}, 500);
}, false);
// 进入test节点以后，只要在子Element节点上移动，该事件会触发多次
// event.target 是 li 节点
test.addEventListener('mouseover', function (event) {
event.target.style.color = 'orange';
setTimeout(function () {
event.target.style.color = '';
}, 500);
}, false);
1.4、mouseout事件，mouseleave事件
mouseout事件和mouseleave事件，都是鼠标离开一个节点时触发。
两者的区别是，mouseout事件会冒泡，mouseleave事件不会。子节点的mouseout事件会冒泡到父节点，进而触发父节点的mouseout事件。mouseleave事件就没有这种效果，所以离开子节点时，不会触发父节点的监听函数。
1.5、contextmenu事件
contextmenu事件在一个节点上点击鼠标右键时触发，或者按下“上下文菜单”键时触发。
二、MouseEvent对象
2.1、概述
2.1、概述
2.1、概述
2.1、概述
2.1、概述
三、wheel事件
wheel事件是与鼠标滚轮相关的事件，目前只有一个wheel事件。用户滚动鼠标的滚轮，就触发这个事件。
该事件除了继承了MouseEvent、UIEvent、Event的属性，还有几个自己的属性。
- deltaX：返回一个数值，表示滚轮的水平滚动量。
- deltaY：返回一个数值，表示滚轮的垂直滚动量。
- deltaZ：返回一个数值，表示滚轮的Z轴滚动量。
- deltaMode：返回一个数值，表示滚动的单位，适用于上面三个属性。0表示像素，1表示行，2表示页。
浏览器提供一个WheelEvent构造函数，可以用来生成滚轮事件的实例。它接受两个参数，第一个是事件名称，第二个是配置对象。
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});
四、键盘事件
五、进度事件
六、拖拉事件
七、触摸事件
触摸API由三个对象组成。
Touch
TouchList
TouchEvent
八、表单事件
8.1、Input事件，select事件，change事件
以下事件与表单成员的值变化有关。
（1）、input事件
input事件当<input>、<textarea>的值发生变化时会触发。此外，打开contenteditable属性的元素，只要值发生变化，也会触发input事件。
input事件的一个特点，就是会连续触发，比如用户没次按下一次按键，就会触发一次input事件。
（2）、select事件
select事件当在<input>、<textarea>中选中文本时触发。
（3）、Change事件
Change事件当<input>、<select>、<textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，而且input事件必然会引发Change事件。
8.2、reset事件，submit事件
以下事件发生在表单对象上，而不是发生在表单的成员上。
（1）、reset事件
reset事件当表单重置（所有表单成员变回默认值）时触发。
（2）、submit事件
submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是form元素，而不是button元素（即使它的类型是submit），因为提交的是表单，而不是按钮。
九、文档事件
9.1、beforeunload事件，unload事件，load事件，error事件，pageshow事件，pagehide事件
以下事件与网页的加载与卸载相关。
（1）、beforeunload事件
（2）、unload事件
（3）、load事件，error事件
（4）、pageshow事件，pagehide事件
9.2、DOMContentLoaded事件，readystatechange事件
以下事件与文档状态相关。
（1）、DOMContentLoaded事件
（2）、readystatechange事件
9.3、scroll事件，resize事件
以下事件与窗口行为有关。
（1）、scroll事件
scroll事件在文档或文档元素滚动时触发，主要出现在用户拖动滚动条。
window.addEventListener('scroll', callback);
由于该事件会连续地大量触发，所以它的监听函数之中不应该有非常耗费计算的操作。推荐的做法是使用 requestAnimationFrame或setTimeout控制该事件的触发频率，然后可以结合customEvent抛出一个新事件。
（2）、resize事件
resize事件在改变浏览器窗口大小时触发，发生在window、body、frameset对象上面。
该事件也会连续地大量触发，所以最好像上面的scroll事件一样，通过throttle函数控制事件触发频率。
9.4、hashchange事件，popstate事件
以下事件与文档的URL变化相关。
（1）、hashchange事件
（2）、popstate事件
9.5、cut事件，copy事件，paste事件
以下三个事件属于文本操作触发的事件。
- cut事件：在将选中的内容从文档中移除，加入剪贴板后触发。
- copy事件：在选中的内容加入剪贴板后触发。
- paste事件：在剪贴板内容被粘贴到文档后触发。
9.6、焦点事件
以下事件与文档的URL变化相关。
（1）、hashchange事件
（2）、popstate事件
