什么是冒泡與捕獲
? ? ? ? 以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。
應(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é)束,就不再顯示商品詳情。