什么是冒泡與捕獲

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

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

事件傳遞

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

先捕獲后冒泡

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

舉一反三

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

舉一反三

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

????????在不使用任何框架的情況下，我們在js中通過addEventListener方法給Dom添加事件監(jiān)聽。這個方法有三個參數(shù)可以傳遞addEventListener(event,fn,useCapture)。event是事件類型click，focus，blur等；fn是事件觸發(fā)時將執(zhí)行的函數(shù)方法（function）；第三個參數(shù)可以不傳，默認是false，這個參數(shù)控制是否捕獲觸發(fā)。所以我們只穿兩個參數(shù)時，這個事件是冒泡傳遞觸發(fā)的，當?shù)谌齻€參數(shù)存在且為true時，事件是捕獲傳遞觸發(fā)的。

? ? ? ? 使用框架時可使用對應(yīng)的框架提供的方法。如上面我使用了Vue框架，通過事件裝飾來區(qū)分捕獲與冒泡。

阻止傳遞

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

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

阻止傳遞

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

輸出結(jié)果

應(yīng)用場景舉例

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

前端豆知識，很小卻有用