事件冒泡和事件捕獲
起因：今天在封裝一個(gè)bind函數(shù)的時(shí)候，發(fā)現(xiàn)el.addEventListener函數(shù)支持第三個(gè)參數(shù)，useCapture：是否使用事件捕獲，覺得有點(diǎn)模糊
-
Js事件流
頁面的哪一部分會(huì)擁有某個(gè)特定事件，例子：在紙上畫一組同心圓，如果手指放在同心圓上，那么手指向的不是一個(gè)圓，而是紙上所有的圓。在頁面中也是，如果點(diǎn)擊了某個(gè)按鈕，同時(shí)也單擊了按鈕的容器元素，甚至也單擊了整個(gè)頁面
事件流：頁面接收事件的順序，IE和Netscape最開始提出了兩種概念，兩種事件冒泡流，事件捕獲流
<!-- 假如有這樣一段相同的html -->
<!DOCTYPE html>
<html>
<head><title>bubbling and capture</title></head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>
-
事件冒泡(event bubbling)
IE提出的事件處理方式，即事件開始時(shí)，由最具體的元素接收，然后逐級(jí)向上傳播到不具體的節(jié)點(diǎn)如果點(diǎn)擊例子中的
div元素，那么這個(gè)click的事件傳播順序如下：div -> body -> html -> document也就是說，
click事件首先會(huì)在div元素上觸發(fā)，這個(gè)元素就是我們單擊的元素，然后click事件會(huì)沿著DOM樹向上傳播，在每一級(jí)節(jié)點(diǎn)都會(huì)發(fā)生，直到傳播到document對(duì)象所有瀏覽器都支持事件冒泡，但是在具體實(shí)現(xiàn)上會(huì)有些許的差別，例如IE5.5以及更早版本中的事件冒泡會(huì)跳過
Html元素，直接從body跳到document元素，而IE9,Firefox,Chrome,Safari則將事件一直冒泡到window對(duì)象 -
事件捕獲(event capturing)
Netscape網(wǎng)井團(tuán)隊(duì)則題除另一種事件流叫做事件捕獲,事件捕獲的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早的接收到事件，而具體的節(jié)點(diǎn)應(yīng)該最后接收到事件，事件捕獲的用意在于事件達(dá)到預(yù)計(jì)目標(biāo)之前捕獲他，如果還是以上面的例子，單擊div那么觸發(fā)順序會(huì)是這樣
document -> html -> body -> div在事件捕獲過程中，
document對(duì)象首先接收到click事件，然后事件沿DOM樹依次向下，一直傳播到時(shí)間的實(shí)際目標(biāo)即div元素雖然
Netscape是開發(fā)這種事件流，但是目前所有較新的瀏覽器都支持這種事件流模型，盡管“DOM2級(jí)事件”規(guī)范要求事件應(yīng)該從document對(duì)象開始傳播，但是這些瀏覽器都是從window對(duì)象開始捕獲事件由于老版本瀏覽器不支持，所以很少使用事件捕獲，推薦放心使用事件冒泡，在有特殊需求時(shí)再使用事件捕獲
-
DOM事件流"DOM2級(jí)別事件"什么是DOM2級(jí)別規(guī)定的事件流包括三個(gè)階段
|事件捕獲階段|處于目標(biāo)階段|事件冒泡階段|
|----|----|----|----|
|事件未處于目標(biāo)，事件傳遞按照從大到小，從外層順著DOM樹向目標(biāo)傳遞，觸發(fā)順序，從外到里|處于目標(biāo)階段：事件會(huì)在目標(biāo)元素上發(fā)生，并且在事件處理中堪稱冒泡階段的一部分|事件冒泡階段：事件從目標(biāo)元素開始，順著DOM樹往外傳遞，依次到父容器，body,html,document部分瀏覽器會(huì)到window -
什么是DOM2級(jí)別？什么是DOM0級(jí)別？什么是DOM事件處理程序等級(jí)
事件：用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作，例如
click,load,mouseover都是事件名字，而相應(yīng)某個(gè)事件的函數(shù)，就叫做事件處理程序，事件處理程序的名字以on開頭，例如click事件的處理程序就是onclick,load事件的處理陳鼓型就是onload-
HTML事件處理程序某個(gè)
html元素支持某種事件，都可以使用一個(gè)與對(duì)應(yīng)時(shí)間處理程序同名的html屬性來指定，這個(gè)屬性的值則是能夠執(zhí)行的javascript代碼，例如<div onclick="alert(1)"></div>該事件觸發(fā)于：冒泡階段觸發(fā)
-
DOM0級(jí)事件處理程序html事件處理程序的javascript邏輯和html耦合太強(qiáng)DOM0級(jí)事件處理程序?qū)懛?/p>
var btn = document.getElementById('myBtn') btn.onclick= function(){ alert(this.id) }此處的
this指向的是這個(gè)觸發(fā)元素，并且可以通過this對(duì)象訪問元素的任何屬性和方法，以這種方式添加的事件處理程序會(huì)在事件流的冒泡階段被處理移除事件監(jiān)聽 ：
btn.onclick = null
-
* `DOM2級(jí)事件處理程序`
兩個(gè)方法：`addEventListener`和`removeEventListener`
所有的`DOM`節(jié)點(diǎn)都包含這兩個(gè)方法，并且接受三個(gè)參數(shù)，要處理的事件名，作為事件處理函數(shù)的函數(shù)和一個(gè)布爾值，最后這個(gè)布爾值如果是`true`，表示在**捕獲階段調(diào)用事件處理程序**，如果是`false`則表示在**冒泡階段調(diào)用事件處理程序**
而事件流的順序是**捕獲-目標(biāo)-冒泡，捕獲階段會(huì)在冒泡事件處理之前，所以改為`true`的話有可能會(huì)影響正常的時(shí)間順序**
demo如下：
```js
var btn = document.getElementById('myBtn')
btn.addEventListener('click',function(){
alert(this.id)
},false)
```
**DOM2級(jí)方法添加事件處理程序的好處是可以添加多個(gè)事件處理程序，而前兩個(gè)則是會(huì)替換掉事件處理程序，因?yàn)閷傩灾挥幸粋€(gè)，而元素的方法也會(huì)重寫**
但是也意味著，不能通過重寫來移除事件處理程序，所以通過`removeEventListener`來移除事件處理程序，并且匿名函數(shù)無法移除
**大多數(shù)情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度的兼容各種瀏覽器，最好只在需要在事件到達(dá)目標(biāo)之前截獲它的時(shí)候?qū)⑹录幚沓绦蛱砑拥讲东@階段，如果不是特別需要，不建議在時(shí)間捕獲階段注冊(cè)事件處理程序**
* IE事件處理程序
IE中實(shí)現(xiàn)了與`DOM`中類似的兩個(gè)方法`attachEvent`和`detachEvent`，但是僅接受兩個(gè)參數(shù)，一個(gè)是事件處理程序名稱與事件處理函數(shù)，由于`IE8`以及更早的版本只支持事件冒泡，所以通過`attachEvent`添加的事件處理程序都會(huì)被添加到**事件冒泡階段**
**需要注意的是：**
**1.`attachEvent`和DOM級(jí)方法主要區(qū)別在事件處理程序的作用域，DOM0級(jí)會(huì)在所屬元素的作用域內(nèi)，而`attachEvent`事件處理程序會(huì)在全局作用域中運(yùn)行，因此在attachEvent添加的函數(shù)中，this指向window**
**2.`attachEvent`添加多個(gè)事件時(shí)候時(shí)，不是按照添加順序執(zhí)行，而是按照相反的順序執(zhí)行，后添加，先執(zhí)行**
總結(jié)
-
el.addEventListener函數(shù)的第三個(gè)參數(shù)問題得到了解決，使用這種方法表示綁定DOM2級(jí)別的事件監(jiān)聽程序，可以重復(fù)指定，第三個(gè)參數(shù)表示是否在捕獲階段處理事件，捕獲-》 目標(biāo) -》 冒泡 - 第三個(gè)參數(shù)默認(rèn)
false，如沒有特殊情況不推薦使用在捕獲階段處理時(shí)間程序 - 了解了
事件流,捕獲和冒泡,DOM事件類型級(jí)別(HTML級(jí)事件處理程序，DOM0級(jí)事件處理程序，DOM2級(jí)事件處理程序，IE事件處理程序) - 事件流過程，先從外到內(nèi)，捕獲階段，到達(dá)目標(biāo)階段，從內(nèi)到外冒泡
