昨天面試問到這個問題，不是回答不上來，而是面試官問我哪個瀏覽器不支持事件捕獲/冒泡。確實忘了，回來記憶，順便把一些和事件流有關的內容再梳理一遍。

事件冒泡：
從事件源朝父級一直到根元素（HTML）。當某個元素的某類型事件被觸發時，那么它的父元素同類型的事件也會被觸發，一直觸發到根源上；
從具體的元素到不確定的元素。

事件捕獲：
從根元素（HTML）到事件源，當某個元素的某類型事件被觸發時，先觸發根元素的同類型事件，朝子一級觸發，一直觸發到事件源。
從不確定的元素到具體的元素；

事件流：就是事件的流向，先捕獲，再到事件源，最后再冒泡，一共分三個階段：捕獲階段，目標階段，冒泡階段。（W3C標準，當處于目標階段時事件觸發）

** 事件委托/代理**：
由冒泡事件衍生出的事件委托機制,既然事件是冒泡傳遞的，那可以讓某個父節點統一處理事件，通過判斷事件的發生地（即事件產生的節點），然后做出相應的處理。就是將子元素的事件處理程序綁定到父類上，例如常見的ul>li> a列表標簽的寫法應用。

在一些標準的瀏覽器中，如Chrome、Firefox等，支持這兩種冒泡方式。而事實上，準確的說，是這兩種方式的混合方式。因為W3C采取的就是這兩種方式的結合：先從頂級節點開始，將事件向下傳遞至源節點，再從源節點冒泡至頂節點。

而在IE及Opera（以下說的都是老版本的歐朋，新版本的歐朋經檢測是支持事件捕獲的）下，是不支持事件捕獲的。而這個特點最明顯體現在事件綁定函數上。

IE、Opera的事件綁定函數是attachEvent，而Chrome等瀏覽器則是addEventListener，而后者比前者的參數多了一個——這個參數是一個布爾值，這個布爾值由用戶決定，用戶若設為true，則該綁定事件以事件捕獲的形式參與，若為false則以事件冒泡的形式參與。

阻止冒泡

div.addEventListener("click',function(e){e.stopPropagation(); },true) // 這樣div的父元素就接收不到事件了

stopPropagation()方法既可以阻止事件冒泡，也可以阻止事件捕獲，也可以阻止處于目標階段。

無論事件流中只有捕獲還是事件流中只有冒泡，還是說是事件流中既有捕獲還有冒泡，event.stopPropagation()都可以阻止事件流的傳播順序。只要是event.stopPropagation()加在哪里，則到哪里就停止運行，停止捕獲或者停止冒泡，簡單說是，仍然按照正常的混合機制流程走，只是哪里有e.stopPropagation()則這個流程到哪里就停止了。

stopImmediatePropagation： 防止對事件流中當前節點中和所有后續節點中的事件偵聽器進行處理（對當前節點第二次綁定事件時，不監聽）
stopPropagation：防止對事件流中當前節點的后續節點中的所有事件偵聽器進行處理

e=e||window.event;if(e.stopPropagation){e.stopPropagation();//其它瀏覽器}else{e.cancelBubble=true;//IE瀏覽器}

可以使用DOM3級新增事件stopImmediatePropagation()方法來阻止事件捕獲,那么 stopImmediatePropagation() 和 stopPropagation()的區別在哪兒呢？
后者只會阻止冒泡或者是捕獲。 但是前者除此之外還會阻止該元素的其他事件發生，但是后者就不會阻止其他事件的發生(從而需要設置取消默認)。

阻止默認事件

有一些html元素默認的行為，比如說a標簽，點擊后有跳轉動作；form表單中的submit類型的input有一個默認提交跳轉事件；reset類型的input有重置表單行為。

e.preventDefault();

總結

以上是生活随笔為你收集整理的面试题：浏览器事件冒泡、事件捕获的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。