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

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

事件捕獲：
從根元素（HTML）到事件源，當(dāng)某個(gè)元素的某類型事件被觸發(fā)時(shí)，先觸發(fā)根元素的同類型事件，朝子一級觸發(fā)，一直觸發(fā)到事件源。
從不確定的元素到具體的元素；

事件流：就是事件的流向，先捕獲，再到事件源，最后再冒泡，一共分三個(gè)階段：捕獲階段，目標(biāo)階段，冒泡階段。（W3C標(biāo)準(zhǔn)，當(dāng)處于目標(biāo)階段時(shí)事件觸發(fā)）

** 事件委托/代理**：
由冒泡事件衍生出的事件委托機(jī)制,既然事件是冒泡傳遞的，那可以讓某個(gè)父節(jié)點(diǎn)統(tǒng)一處理事件，通過判斷事件的發(fā)生地（即事件產(chǎn)生的節(jié)點(diǎn)），然后做出相應(yīng)的處理。就是將子元素的事件處理程序綁定到父類上，例如常見的ul>li> a列表標(biāo)簽的寫法應(yīng)用。

在一些標(biāo)準(zhǔn)的瀏覽器中，如Chrome、Firefox等，支持這兩種冒泡方式。而事實(shí)上，準(zhǔn)確的說，是這兩種方式的混合方式。因?yàn)閃3C采取的就是這兩種方式的結(jié)合：先從頂級節(jié)點(diǎn)開始，將事件向下傳遞至源節(jié)點(diǎn)，再從源節(jié)點(diǎn)冒泡至頂節(jié)點(diǎn)。

而在IE及Opera（以下說的都是老版本的歐朋，新版本的歐朋經(jīng)檢測是支持事件捕獲的）下，是不支持事件捕獲的。而這個(gè)特點(diǎn)最明顯體現(xiàn)在事件綁定函數(shù)上。

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

阻止冒泡

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

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

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

stopImmediatePropagation： 防止對事件流中當(dāng)前節(jié)點(diǎn)中和所有后續(xù)節(jié)點(diǎn)中的事件偵聽器進(jìn)行處理（對當(dāng)前節(jié)點(diǎn)第二次綁定事件時(shí)，不監(jiān)聽）
stopPropagation：防止對事件流中當(dāng)前節(jié)點(diǎn)的后續(xù)節(jié)點(diǎn)中的所有事件偵聽器進(jìn)行處理

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

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

阻止默認(rèn)事件

有一些html元素默認(rèn)的行為，比如說a標(biāo)簽，點(diǎn)擊后有跳轉(zhuǎn)動作；form表單中的submit類型的input有一個(gè)默認(rèn)提交跳轉(zhuǎn)事件；reset類型的input有重置表單行為。

e.preventDefault();

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。