摘要：事件冒泡一個(gè)簡單，但是坑了我無數(shù)回的知識(shí)點(diǎn)與的交互通過事件來實(shí)現(xiàn)。而瀏覽器的事件流是一個(gè)非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭議，只需要知道在中規(guī)定的事件流包括了三個(gè)部分，事件捕獲階段處于目標(biāo)階段事件冒泡階段。

打算封裝一個(gè)彈窗組件，做的時(shí)候忘記了考慮事件冒泡的因素，結(jié)果被坑得不要不要的。為了解決自己的問題，去查閱了不少資料，把事件流相關(guān)的知識(shí)都給總結(jié)一下。

事件冒泡：一個(gè)簡單，但是坑了我無數(shù)回的知識(shí)點(diǎn)！

JavaScript與HTML的交互通過事件來實(shí)現(xiàn)。而瀏覽器的事件流是一個(gè)非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭議，只需要知道在DOM2中規(guī)定的事件流包括了三個(gè)部分，事件捕獲階段、處于目標(biāo)階段、事件冒泡階段。

事件捕獲，是從document元素開始，越高級的父級元素越早接收到事件，因此這是一個(gè)從上而下的過程。

還是那句話，沒在實(shí)際應(yīng)用中踩過坑，可能你真的不算掌握了這個(gè)知識(shí)點(diǎn)。那么，事件捕獲有什么常見的坑呢？

1. 坑一：新插入的子元素沒有綁定點(diǎn)擊事件

可能不少同學(xué)在初學(xué)js的時(shí)候遇到過這樣一個(gè)坑。一個(gè)ul元素中初始的狀態(tài)有4個(gè)li元素，我們可以循環(huán)給li元素添加click事件，執(zhí)行我們想要的動(dòng)作。這個(gè)例子的坑就在于，新添加的li元素不會(huì)有我們綁定的click事件。

是的，就是這么坑，為了解決這個(gè)問題，我們就要利用事件捕獲的原理。

$("ul.container").click(function(event) {
    var target = event.target;
    if (target.className == "item") {
        // dosomething
    }
})

在上面的解決方案中，我并不是直接給li綁定事件，而是給所有l(wèi)i的父級ul綁定事件。根據(jù)事件捕獲的原理，事件會(huì)自上而下傳遞給li，我們只需要通過一些簡單的條件判斷來確定我們的目標(biāo)元素即可，如上例中的判斷l(xiāng)i的className。

這個(gè)方式就是大名鼎鼎的事件委托。

事件委托是一個(gè)很重要而且在實(shí)際中會(huì)常常用到的知識(shí)點(diǎn)。

2. 坑二： 如果目標(biāo)元素有子元素，那么怎么辦？

當(dāng)我們在使用className判斷目標(biāo)元素時(shí)，會(huì)遇到這樣的情況。

...

    
xxx
    
xxxxxxs

...

當(dāng)我們試圖使用事件委托希望給所有的li添加元素時(shí)，在利用className判斷的過程中發(fā)現(xiàn)，目標(biāo)event.target元素居然是li.item的子元素，這個(gè)時(shí)候就沒辦法準(zhǔn)確的將事件綁定到li上了，這個(gè)時(shí)候我們應(yīng)該怎么辦？

這種情況，我們要做的，就是阻止事件捕獲的傳遞，那么，要如何阻止呢？

我知道的一種方式，利用css，給li所有子元素添加如下css屬性即可

li.item >  * {
  pointer-events: none;
}

按道理來說，應(yīng)該是有js方式的，可是查了很多文章都沒有提及，因此就暫時(shí)這樣吧，到時(shí)候遇到了在補(bǔ)充。

在jquery中，已經(jīng)幫助我們實(shí)現(xiàn)了事件委托，并且?guī)臀覀兘鉀Q掉了這些坑。我們只需要按照一定語法使用即可，而我們不用再自己去進(jìn)行條件判斷，比如我們要給所有的li.item元素綁定事件，寫法如下

// on中的第二參數(shù)就是我們的目標(biāo)元素的選擇器
$("ul.container").on("click", "li.item", function(event) {
    // dosomething
})

說完了事件捕獲，然后來說說事件冒泡這個(gè)坑。所謂事件冒泡，就是讓DOM樹最底層的目標(biāo)元素最先接收到事件，然后往上傳遞，這是一個(gè)自下而上的過程。

我們常常會(huì)遇到一種彈窗樣式，彈窗出來時(shí)，內(nèi)容在中間，然后會(huì)有一層半透明的遮罩將頁面內(nèi)容與彈窗區(qū)分開。彈窗內(nèi)容會(huì)有一些按鈕綁定點(diǎn)擊事件，比如確認(rèn)與取消。而在半透明遮罩上，可能也會(huì)綁定一個(gè)點(diǎn)擊事件，當(dāng)點(diǎn)擊時(shí)，將彈窗隱藏。如果我由于經(jīng)驗(yàn)不足，將該遮罩層設(shè)置成了彈窗按鈕的父級，那么就會(huì)遇到事件冒泡帶來的麻煩。

也就是說，在如下例子中 container是全屏遮罩，button是彈窗里面的點(diǎn)擊按鈕。他們都同時(shí)綁定了click事件，執(zhí)行不同的動(dòng)作。但是在實(shí)際執(zhí)行的時(shí)候，當(dāng)我點(diǎn)擊了button，那么button和container的click事件都會(huì)執(zhí)行，自下而上按順序執(zhí)行

    
click

我為這個(gè)事情寫了一個(gè)小例子，大家可以動(dòng)手感受一下這個(gè)坑。點(diǎn)擊空白會(huì)生成一個(gè)彈窗

http://yangbo5207.github.io/s...

好吧解決問題的方法很簡單，就是阻止冒泡事件。

$xxx.click(function(e) {
    e.stopPropagation();
    
    // ie
    e.cancelBubble = true;
})

理解了整個(gè)事件流，我們可以感受事件在DOM中的傳遞過程與方向，并且利用他來解決我們的問題和各種坑，雖然是一個(gè)簡單的知識(shí)點(diǎn)，但是卻非常容易被忽略，因此建議大家找機(jī)會(huì)將它掌握牢固。

而還有一個(gè)坑，可能大家在實(shí)際中會(huì)很少遇到，這個(gè)坑就是，某些事件類型天生就不支持事件冒泡！

blur: 在元素失去焦點(diǎn)時(shí)觸發(fā)，該事件不支持冒泡
focus: 在元素獲得焦點(diǎn)時(shí)觸發(fā)，該事件不支持冒泡
mouseenter: 當(dāng)鼠標(biāo)移入元素時(shí)觸發(fā)，該事件不支持冒泡
mouseleave: 當(dāng)鼠標(biāo)移出元素時(shí)觸發(fā)，該事件不支持冒泡
... ...

以及IE6 IE7 IE8中 的 change、select、submit、reset 事件事實(shí)上都沒有參照規(guī)范定義產(chǎn)生事件冒泡。

當(dāng)你在需要的冒泡的時(shí)候，綁定了這些事件，而你恰好不知道居然還有事件天生就不支持冒泡的，那么你可能就悲劇了。所以這個(gè)點(diǎn)只要在腦袋里面有個(gè)印象就好了，我只記得我曾經(jīng)遇到過這樣一個(gè)坑，但暫時(shí)想不起來應(yīng)用場景了 - -！

我所知道的，遇到過的關(guān)于事件流的坑就這么多了，想來應(yīng)該也算是非常完整的一個(gè)總結(jié)了，值得大家點(diǎn)一下推薦和收藏的哦！