事件捕獲event capturing是一種從上而下的傳播方式，以click事件為例，其會從最外層根節向內傳播到達點選的節點，為從最外層節點逐漸向內傳播直到目標節點的方式。
事件冒泡event bubbling是一種從下往上的傳播方式，同樣以click事件為例，事件最開始由點選的節點，然後逐漸向上傳播直至最高層節點。
也稱為原始事件模型，這種方式較為簡單且相容所有瀏覽器，但是卻將介面與邏輯耦合在一起，可維護性差。
當點選id為i3的時，瀏覽器會依次彈出2 1 0。
ie8及之前的版本是不支援捕獲事件的，ie事件模型共有兩個過程:
事件處理階段target phase，事件到達目標元素, 觸發目標元素的監聽事件。
事件冒泡階段bubbling phase事件從目標元素冒泡到document，依次執行經過的節點繫結的事件。
dom2事件模型是w3c制定的標準模型，支援捕獲型事件和冒泡型事件，呼叫事件的處理階段依次為捕獲、目標、冒泡。
當點選id為i3的時，瀏覽器會依次彈出0 1 3 2，addeventlistener方法的第三個引數為宣告繫結的事件為捕獲型還是冒泡型，預設為false，也就是冒泡型。
document物件與i1節點繫結的是捕獲型的監聽事件，i2與i3節點繫結的是冒泡型的事件，事件傳遞的順序為：
window --- document --- html --- body --- i1 --- i2 --- i3 --- i2 --- i1 --- body --- html --- document --- windowwindow到i3的過程為捕獲階段，依次執行了過程中繫結的事件，本例中執行了alert(0)與alert(1)，然後到達目標階段的i3,執行i3繫結的事件alert(3)，然後從i3到window的階段為冒泡階段，執行了繫結的alert(2)，執行順序即為0 1 3 2。
在dom0中直接繫結函式執行時，後定義的函式會覆蓋前邊繫結的函式，下面這個例子只執行alert(1)而不執行alert(0)。click()是乙個物件事件，點選即觸發onclick()繫結的方法，onclick()是物件的屬性，將其繫結函式後即為click()事件觸發後執行的方法。
addeventlistener可以為事件繫結多個函式，並且繫結時不需要加on，其還可以接收第三個引數usecapture來決定事件時繫結的捕獲階段還是冒泡階段執行。
document.getelementbyid("i1").addeventlistener('click',(e) => ) // 執行
document.getelementbyid("i1").addeventlistener('click',(e) => ) // 執行
attachevent可以為事件繫結多個函式，繫結時需要加on，其只支援冒泡階段執行，所以不存在第三個引數。
document.getelementbyid("i1").attachevent('onclick',function(e)) // 執行
document.getelementbyid("i1").attachevent('onclick',function(e)) // 執行
事件流模型
js事件流模型 事件捕獲event capturing是一種從上而下的傳播方式，以click事件為例，其會從最外層根節向內傳播到達點選的節點，為從最外層節點逐漸向內傳播直到目標節點的方式。事件冒泡event bubbling是一種從下往上的傳播方式，同樣以click事件為例，事件最開始由點選的節點，...
深入理解JS的事件繫結 事件流模型
一 js事件 一 js事件分類 1.滑鼠事件 click dbclick mouseover mouseout 2.html事件 onload onunload onsubmit onresize onchange onfoucs onscroll 3.鍵盤事件 keydown 鍵盤按下時觸發 ke...
JS事件流，事件繫結
事件流，事件繫結 主流browser，符合w3c標準，支援冒泡和捕獲 低版本ie，僅支援冒泡 冒泡到window document 事件繫結 解綁 elem.addeventlistener evt,func,usecapture elem.removeeventlistener evt,func ...