#### 什么叫事件流
1. DOM2级规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
#### 事件冒泡
1. 即事件开始时由最具体的元素接收，然后逐级向上传播到顶层节点
2. div -> body -> html -> document -> window
```
let btn \= document.querySelector('button')
btn.onclick \= function() {
console.log( 'button' )
}
document.body.onclick \= function() {
console.log( 'body' )
}
document.documentElement.onclick \= function() {
console.log( 'html' )
}
document.onclick \= function() {
console.log( 'document' )
}
window.onclick \= function() {
console.log( 'window' )
}
```
#### 事件捕获
1. 事件捕获是另一种事件流，即从最不具体的元素开始接收事件
2. window -> document -> html -> body -> div
```
let btn \= document.querySelector('button')
btn.addEventListener('click', function() {
console.log( 'button' )
}, true)
document.body.addEventListener('click', function() {
console.log( 'body' )
}, true)
document.documentElement.addEventListener('click', function() {
console.log( 'html' )
}, true)
document.addEventListener('click', function() {
console.log( 'document' )
}, true)
window.addEventListener('click', function() {
console.log( 'window' )
}, true)
```
#### 事件委托
1. 事件委托是利用事件冒泡特性而产生的技术，准确来说是利用了事件流，冒泡和捕获都可以实现委托
2. 为了处理多个元素相同的事件
3. 事件委托有以下几点优点：
1. 性能更高，只需要绑定一个函数，开辟一块空间
2. 操作引用更少，所花费的时间也更少
3. document对象可以快速访问，不需要等待DOMContentLoaded 或 load事件事件完毕即可绑定并实现事件
#### DOM0级事件处理程序
1. 添加事件，on + 事件名：onclick = function(){}
2. 移除事件，onclick = null
#### DOM2级事件处理程序
1. 添加事件，addEventListener( 'click', handle, false )
2. 移除事件，removeEventListener( 'click', handle, false )
3. DOM2级事件的优点在于可以为一个元素添加相同的事件多次，按添加的顺序进行执行
4. 浏览器支持：IE9及以上
5. addEventListener第三个参数，为true的话为事件捕获，默认false为事件冒泡
6. 小技巧，当为同一个元素绑定不同的事件类型，可通过e.type进行case处理
#### IE8及以下事件处理程序
1. IE8不支持addEventListener事件
2. 添加事件，attachEvent( 'onclick', handler )
3. 移除事件，detachEvent( ‘onclick’, handler )
4. 对于同一个元素添加多个相同的事件，后添加的先执行
#### 阻止事件的默认行为：e.preventDefault()
#### 阻止事件的传播（冒泡或捕获）：e.stopPropagation()
#### DOM元素移除，事件不会移除
#### 当前事件处于的事件阶段：e.eventPhase
1. eventPhase: 1 -- 捕获阶段
2. eventPhase: 2 -- 目标阶段
3. eventPhase: 3 -- 冒泡阶段
#### 事件对象中的几个重要坐标
1. 浏览器可视区左上角(0,0)的坐标: e.clientX e.clientY
2. 相对于设备屏幕左上角(0,0)的坐标: e.screenX e.screenY
3. 相对于事件源左上角(0,0)的坐标: e.offsetX e.offsetY
4. 相对于整个网页左上角(0,0)的坐标: e.pageX e.pageY
