什么是冒泡與捕獲
? ? ? ? 以click點(diǎn)擊事件為例焦履。假如我們有一個(gè)多層結(jié)構(gòu)標(biāo)簽岛琼。如下圖配乓，是4個(gè)div嵌套仿滔。每個(gè)div都有點(diǎn)擊的監(jiān)聽(tīng)事件，分別輸出1234扰付。當(dāng)我們點(diǎn)擊最里面的div時(shí)堤撵，點(diǎn)擊事件開(kāi)始傳遞羽莺，傳遞的全過(guò)程是1-2-3-4-4-3-2-1实昨。
前半部分，事件從最外面的父div依次傳遞到最里面的后代div盐固，1-2-3-4這部分我們叫捕獲過(guò)程。
之后事件又從最里層的后代div逐層傳出曙咽，4-3-2-1這部分我們叫冒泡過(guò)程。
如果我把捕獲監(jiān)聽(tīng)器和冒泡監(jiān)聽(tīng)器都加上洒嗤，如下圖這樣洁奈。
這時(shí)我們有8個(gè)監(jiān)聽(tīng)器了间唉，在捕獲過(guò)程和冒泡過(guò)程都有監(jiān)聽(tīng)。輸出如下圖利术。
如果我去除幾個(gè)監(jiān)聽(tīng)器如下圖呈野。為了容易理解我調(diào)整了格式
仍然是按照箭頭順序，明顯應(yīng)該輸出1423氯哮。
添加兩種監(jiān)聽(tīng)的方法
????????在不使用任何框架的情況下际跪，我們?cè)趈s中通過(guò)addEventListener方法給Dom添加事件監(jiān)聽(tīng)。這個(gè)方法有三個(gè)參數(shù)可以傳遞addEventListener(event,fn,useCapture)喉钢。event是事件類型click姆打，focus，blur等肠虽；fn是事件觸發(fā)時(shí)將執(zhí)行的函數(shù)方法（function）幔戏；第三個(gè)參數(shù)可以不傳，默認(rèn)是false税课，這個(gè)參數(shù)控制是否捕獲觸發(fā)闲延。所以我們只穿兩個(gè)參數(shù)時(shí)，這個(gè)事件是冒泡傳遞觸發(fā)的韩玩，當(dāng)?shù)谌齻€(gè)參數(shù)存在且為true時(shí)垒玲，事件是捕獲傳遞觸發(fā)的。
? ? ? ? 使用框架時(shí)可使用對(duì)應(yīng)的框架提供的方法找颓。如上面我使用了Vue框架合愈，通過(guò)事件裝飾來(lái)區(qū)分捕獲與冒泡。
阻止傳遞
? ? ? ? 在不使用任何框架的情況下，我們?cè)趈s中通過(guò)stopPropagation方法阻止事件繼續(xù)傳遞佛析。
????????使用框架時(shí)可使用對(duì)應(yīng)的框架提供的方法益老。接下來(lái)我將了Vue框架的stop修飾符來(lái)阻止事件傳遞。
? ? ? ? 我們可以在傳遞過(guò)程中阻止事件繼續(xù)傳遞寸莫，防止觸發(fā)不需要的事件捺萌。
如圖我在第三層捕獲后阻止事件繼續(xù)傳遞，那么后面的log方法不會(huì)繼續(xù)執(zhí)行膘茎。最終只輸出1-2-3桃纯。
應(yīng)用場(chǎng)景舉例
? ? ? ? 我們?cè)谑褂弥卸鄶?shù)情況下只使用冒泡監(jiān)聽(tīng)。例如一條購(gòu)物車信息披坏，在這條信息中慈参，右下角有一個(gè)刪除按鈕。點(diǎn)擊這條消息可查看詳情刮萌，點(diǎn)擊刪除按鈕可將此商品移除。我們會(huì)分別給信息的div和刪除button添加一個(gè)冒泡的click事件監(jiān)聽(tīng)娘扩。如果不做阻止傳遞着茸，點(diǎn)擊刪除button后，會(huì)顯示商品詳情琐旁。顯然這不是我們想看到的涮阔。這時(shí)我們給button一個(gè)阻止事件傳遞的功能，點(diǎn)擊刪除按鈕后灰殴，事件就會(huì)結(jié)束敬特，就不再顯示商品詳情。
