事件冒泡和事件捕獲
起因：今天在封裝一個bind函數的時候，發現el.addEventListener函數支持第三個參數，useCapture：是否使用事件捕獲，覺得有點模糊
-
Js事件流
頁面的哪一部分會擁有某個特定事件，例子：在紙上畫一組同心圓，如果手指放在同心圓上，那麼手指向的不是一個圓，而是紙上所有的圓。在頁面中也是，如果點擊了某個按鈕，同時也單擊了按鈕的容器元素，甚至也單擊了整個頁面
事件流：頁面接收事件的順序，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提出的事件處理方式，即事件開始時，由最具體的元素接收，然後逐級向上傳播到不具體的節點如果點擊例子中的
div元素，那麼這個click的事件傳播順序如下：div -> body -> html -> document也就是說，
click事件首先會在div元素上觸發，這個元素就是我們單擊的元素，然後click事件會沿着DOM樹向上傳播，在每一級節點都會發生，直到傳播到document對象所有瀏覽器都支持事件冒泡，但是在具體實現上會有些許的差別，例如IE5.5以及更早版本中的事件冒泡會跳過
Html元素，直接從body跳到document元素，而IE9,Firefox,Chrome,Safari則將事件一直冒泡到window對象 -
事件捕獲(event capturing)
Netscape網井團隊則題除另一種事件流叫做事件捕獲,事件捕獲的思想是不太具體的節點應該更早的接收到事件，而具體的節點應該最後接收到事件，事件捕獲的用意在於事件達到預計目標之前捕獲他，如果還是以上面的例子，單擊div那麼觸發順序會是這樣
document -> html -> body -> div在事件捕獲過程中，
document對象首先接收到click事件，然後事件沿DOM樹依次向下，一直傳播到時間的實際目標即div元素雖然
Netscape是開發這種事件流，但是目前所有較新的瀏覽器都支持這種事件流模型，儘管“DOM2級事件”規範要求事件應該從document對象開始傳播，但是這些瀏覽器都是從window對象開始捕獲事件由於老版本瀏覽器不支持，所以很少使用事件捕獲，推薦放心使用事件冒泡，在有特殊需求時再使用事件捕獲
-
DOM事件流"DOM2級別事件"什麼是DOM2級別規定的事件流包括三個階段
事件捕獲階段 處於目標階段 事件冒泡階段 事件未處於目標，事件傳遞按照從大到小，從外層順着 DOM樹向目標傳遞，觸發順序，從外到裏處於目標階段：事件會在目標元素上發生，並且在事件處理中堪稱冒泡階段的一部分 事件冒泡階段：事件從目標元素開始，順着 DOM樹往外傳遞，依次到父容器，body,html,document部分瀏覽器會到window -
什麼是DOM2級別？什麼是DOM0級別？什麼是DOM事件處理程序等級
事件：用戶或瀏覽器自身執行的某種動作，例如
click,load,mouseover都是事件名字，而相應某個事件的函數，就叫做事件處理程序，事件處理程序的名字以on開頭，例如click事件的處理程序就是onclick,load事件的處理陳鼓型就是onload-
HTML事件處理程序某個
html元素支持某種事件，都可以使用一個與對應時間處理程序同名的html屬性來指定，這個屬性的值則是能夠執行的javascript代碼，例如<div onclick="alert(1)"></div>該事件觸發於：冒泡階段觸發
-
DOM0級事件處理程序html事件處理程序的javascript邏輯和html耦合太強DOM0級事件處理程序寫法
var btn = document.getElementById('myBtn') btn.onclick= function(){ alert(this.id) }此處的
this指向的是這個觸發元素，並且可以通過this對象訪問元素的任何屬性和方法，以這種方式添加的事件處理程序會在事件流的冒泡階段被處理移除事件監聽 ：
btn.onclick = null -
DOM2級事件處理程序兩個方法：
addEventListener和removeEventListener所有的
DOM節點都包含這兩個方法，並且接受三個參數，要處理的事件名，作爲事件處理函數的函數和一個布爾值，最後這個布爾值如果是true，表示在捕獲階段調用事件處理程序，如果是false則表示在冒泡階段調用事件處理程序而事件流的順序是捕獲-目標-冒泡，捕獲階段會在冒泡事件處理之前，所以改爲
true的話有可能會影響正常的時間順序demo如下：
var btn = document.getElementById('myBtn') btn.addEventListener('click',function(){ alert(this.id) },false)DOM2級方法添加事件處理程序的好處是可以添加多個事件處理程序，而前兩個則是會替換掉事件處理程序，因爲屬性只有一個，而元素的方法也會重寫
但是也意味着，不能通過重寫來移除事件處理程序，所以通過
removeEventListener來移除事件處理程序，並且匿名函數無法移除大多數情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度的兼容各種瀏覽器，最好只在需要在事件到達目標之前截獲它的時候將事件處理程序添加到捕獲階段，如果不是特別需要，不建議在時間捕獲階段註冊事件處理程序
-
IE事件處理程序
IE中實現了與
DOM中類似的兩個方法attachEvent和detachEvent，但是僅接受兩個參數，一個是事件處理程序名稱與事件處理函數，由於IE8以及更早的版本只支持事件冒泡，所以通過attachEvent添加的事件處理程序都會被添加到事件冒泡階段需要注意的是：
1.
attachEvent和DOM級方法主要區別在事件處理程序的作用域，DOM0級會在所屬元素的作用域內，而attachEvent事件處理程序會在全局作用域中運行，因此在attachEvent添加的函數中，this指向window2.
attachEvent添加多個事件時候時，不是按照添加順序執行，而是按照相反的順序執行，後添加，先執行
-
總結
el.addEventListener函數的第三個參數問題得到了解決，使用這種方法表示綁定DOM2級別的事件監聽程序，可以重複指定，第三個參數表示是否在捕獲階段處理事件，捕獲-》 目標 -》 冒泡- 第三個參數默認
false，如沒有特殊情況不推薦使用在捕獲階段處理時間程序 - 瞭解了
事件流,捕獲和冒泡,DOM事件類型級別(HTML級事件處理程序，DOM0級事件處理程序，DOM2級事件處理程序，IE事件處理程序) - 事件流過程，先從外到內，捕獲階段，到達目標階段，從內到外冒泡