#### 什么叫事件流
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
