详解浏览器的事件系统

一、事件

意义：JavaScript 与 HTML 之间的交互是通过事件完成的。通俗点说事件是实现浏览器与用户交互的唯一途径。
出现：事件最早是在 IE3 和 Netscape Navigator 2 中出现的，当时只是为了分担服务器运算负载。
使用：通过侦听器来预定事件，到一定的时机再触发事件，是一种观察者模式。
核心：事件系统的核心元素是事件类型和事件目标。

二、事件类型

1. 表单事件
浏览器的早期就是支持表单和超链接的元素。所以表单事件是最早，也是最稳定的事件。
submit：表单提交
reset：表单重置
change：值发生改变
blur：离焦（不会冒泡）
focus：聚焦（不会冒泡）

2. window 事件
window 事件指的是浏览器窗口本身而不是窗口内的文档对象。
onload：当文档和资源加载完成后调用
unload：当用户离开当前文档转而其他文档时调用
resize：浏览器窗口改变

3. 鼠标事件
mousemove：移动鼠标时都会触发
mousedown：按下鼠标按键时触发
mouseup：释放鼠标按键时触发
click：鼠标单击时触发
dblclick：鼠标双击时触发
scroll：滚轮滑动时触发
mouseover：鼠标进入元素时触发
mouseout：鼠标离开元素时触发
mouseenter：鼠标进入元素时触发（不会冒泡）
mouseleave：鼠标离开元素时触发（不会冒泡）

4. 键盘事件
keydown：按下按键触发
keyup：释放按键触发
keypress：当 keydown 事件产生可打印字符时，就会触发 keypress 事件

5. H5 新增事件
contextmenu： 鼠标右击事件
beforeunload：关闭浏览器窗口之前触发的事件
DOMContentLoaded：文档对象加载完成之后就触发的事件，无需等待样式、图片等资源
readystatechange：document有 readyState 属性来描述 document 的 loading状态，readyState 的改变会触发 readystatechange 事件
pageShow 和 pagehide：每次用户浏览关闭页面时触发
hashchange：当锚部分发生变化时触发

6. 移动设备事件
orientationchange：苹果公司为移动 Safari 添加的，改变设备的查看模式时触发，对象如 window.orientation 一致。
MozOrientation：与 orientationchange 类似，只不过是 Firefox 3.6 支持的。
deviceorientation：可以响应设备的方向。
devicemotion：检查设备什么时候移动。

7. 触摸与手势事件
触摸事件：
touchstart 触摸开始
touchmove 触摸中
touchend 触摸结束
touchcancel 取消触摸
手势事件：
gesturestart 手势开始
gesturechange 手势改变
gestureend 手势离开

三、事件对象

事件对象是指在注册事件时可获取到的事件对象。
事件对象包含该元素的所有信息，通过对象的属性和方法可以阻止浏览器默认事件与事件传播。

• 通过 preventDefault 可以阻止浏览器的默认事件
• 通过 stopPropagation 可以阻止事件传播（IE9 之前的 IE 不支持此方法，可以用事件对象的 cancelBubble 属性，设置为 true 来阻止事件的进一步传播）。

四、事件流

事件流指的是从页面接收事件的顺序。

1. 事件冒泡
   冒泡就是从一个很小的泡泡一直延伸拓展成一个很大的泡泡，那么事件冒泡也是如此，指的是先从具体的元素一层层到上级元素，直到 window 对象为止。
   比如点击了页面的某个 div，那么事件流顺序是 div => body => html => document。
2. 事件捕获
   事件捕获正好相反，捕获捕获，擒贼先擒王，捕获就要从头儿开始。事件捕获也就是从跟节点开始，向下一层层的到具体的元素。
   比如点击了页面的某个 div，那么事件流顺序是 document => html => body => div。
3. 对比

• 事件冒泡是 IE 提出来的，事件冒泡是 Netscape 提出来的。
• 由于老版本不支持事件捕获，所以建议使用事件冒泡，有特殊情况时才用事件捕获。

五、注册事件

1. 给目标对象或文档元素添加属性
   主要由 “on” +事件名组成，区分大小写，所有都是小写。

window.onload = function(){
}

缺点：这种方式只考虑到事件的一种处理程序。

2. 设置 HTML 标签属性

<button onclick = "alert(111)"></button>	

缺点：这种方式混合了 HTML 和 JavaScript，没法做到分离。

3. 通过 addEventListener() 事件注册

<button id='btn'></button>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){},false);
//addEventListener 接收三个参数，第一个为事件类型，第二个为要处理的函数，第三个为布尔值，默认为false，表示事件流为冒泡，true 为捕获。
btn.removeEventListener('click',function(){},false);
//removeEventListener 是移除事件。

因为 IE9 之前的浏览器不支持 addEventListener 方法，所以在 IE5版本之后定义了 attachEvent 方法和 deleteEvent 方法。
主要的区别是：
1）事件类型要加上 on；
2）不支持捕获，所以没有第三个参数。

<button id='btn'></button>
var btn = document.getElementById('btn');
btn.attachEvent ('onclick',function(){});
//attachEvent 接收两个参数，第一个为事件类型，第二个为要处理的函数
btn.deleteEvent ('click',function(){},false);
//deleteEvent 是移除事件。

4. 调用顺序

• 通过设置属性的优先调用。
• 使用 addEventListener 注册的事件按照注册顺序调用。
• 使用 attachEvent 注册的事件可以按照任何顺序调用，没有调用顺序。