什么是冒泡與捕獲

? ? ? ? 以click點(diǎn)擊事件為例。假如我們有一個(gè)多層結(jié)構(gòu)標(biāo)簽。如下圖，是4個(gè)div嵌套。每個(gè)div都有點(diǎn)擊的監(jiān)聽事件，分別輸出1234。當(dāng)我們點(diǎn)擊最里面的div時(shí)，點(diǎn)擊事件開始傳遞，傳遞的全過程是1-2-3-4-4-3-2-1。
前半部分，事件從最外面的父div依次傳遞到最里面的后代div，1-2-3-4這部分我們叫捕獲過程。
之后事件又從最里層的后代div逐層傳出，4-3-2-1這部分我們叫冒泡過程。

如果我把捕獲監(jiān)聽器和冒泡監(jiān)聽器都加上，如下圖這樣。

事件傳遞

這時(shí)我們有8個(gè)監(jiān)聽器了，在捕獲過程和冒泡過程都有監(jiān)聽。輸出如下圖。

先捕獲后冒泡

如果我去除幾個(gè)監(jiān)聽器如下圖。為了容易理解我調(diào)整了格式

舉一反三

仍然是按照箭頭順序，明顯應(yīng)該輸出1423。

舉一反三

添加兩種監(jiān)聽的方法

????????在不使用任何框架的情況下，我們在js中通過addEventListener方法給Dom添加事件監(jiān)聽。這個(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í)可使用對應(yīng)的框架提供的方法。如上面我使用了Vue框架，通過事件裝飾來區(qū)分捕獲與冒泡。

阻止傳遞

? ? ? ? 在不使用任何框架的情況下，我們在js中通過stopPropagation方法阻止事件繼續(xù)傳遞。
????????使用框架時(shí)可使用對應(yīng)的框架提供的方法。接下來我將了Vue框架的stop修飾符來阻止事件傳遞。

? ? ? ? 我們可以在傳遞過程中阻止事件繼續(xù)傳遞，防止觸發(fā)不需要的事件。

阻止傳遞

如圖我在第三層捕獲后阻止事件繼續(xù)傳遞，那么后面的log方法不會(huì)繼續(xù)執(zhí)行。最終只輸出1-2-3。

輸出結(jié)果

應(yīng)用場景舉例

? ? ? ? 我們在使用中多數(shù)情況下只使用冒泡監(jiān)聽。例如一條購物車信息，在這條信息中，右下角有一個(gè)刪除按鈕。點(diǎn)擊這條消息可查看詳情，點(diǎn)擊刪除按鈕可將此商品移除。我們會(huì)分別給信息的div和刪除button添加一個(gè)冒泡的click事件監(jiān)聽。如果不做阻止傳遞，點(diǎn)擊刪除button后，會(huì)顯示商品詳情。顯然這不是我們想看到的。這時(shí)我們給button一個(gè)阻止事件傳遞的功能，點(diǎn)擊刪除按鈕后，事件就會(huì)結(jié)束，就不再顯示商品詳情。

前端豆知識，很小卻有用