簡(jiǎn)介

????????Vue提供了事件綁定的語(yǔ)法糖，我們?cè)跇?biāo)簽中可直接使用形如v-on:click，@click，@focus的形式綁定事件監(jiān)聽(tīng)器，并且可以使用修飾符對(duì)事件進(jìn)行option設(shè)置。本次解釋下stop與capture的修飾符。stop是阻止事件傳遞，capture是在捕獲的過(guò)程監(jiān)聽(tīng)，沒(méi)有capture修飾符時(shí)都是默認(rèn)冒泡過(guò)程監(jiān)聽(tīng)。

冒泡與捕獲

????????首先我們需要形成監(jiān)聽(tīng)器的思想。在不使用任何框架的情況下，我們?cè)趈s中通過(guò)addEventListener方法給Dom添加事件監(jiān)聽(tīng)。這個(gè)方法直譯就是添加事件監(jiān)聽(tīng)器。我們對(duì)Dom的操作作為事件會(huì)從最外面的祖先Dom逐步傳遞到目標(biāo)Dom（捕獲過(guò)程），然后再?gòu)哪繕?biāo)的Dom原路傳出去（冒泡過(guò)程）。通常我們只監(jiān)聽(tīng)冒泡過(guò)程。在vue中，當(dāng)我們添加了事件修飾符capture后，才會(huì)變成捕獲監(jiān)聽(tīng)器。
點(diǎn)擊標(biāo)題或右邊藍(lán)色鏈接可打開(kāi)我的另一篇文章JavaScript事件冒泡與捕獲，查看更詳細(xì)的解釋。

圖1.冒泡與捕獲

? ? ? ? 如上圖，我對(duì)4個(gè)div分別設(shè)置了冒泡監(jiān)聽(tīng)器和捕獲監(jiān)聽(tīng)器。當(dāng)我們點(diǎn)擊最里層的div時(shí)，事件的傳遞過(guò)程如上圖所示。log（）方法是我定義的，有在控制臺(tái)輸出的功能。點(diǎn)擊一下“點(diǎn)擊這里”，控制臺(tái)會(huì)輸出12344321。

stop阻止傳遞

? ? ? ? 上面已經(jīng)說(shuō)明了事件傳遞的過(guò)程，當(dāng)我們隨便在8個(gè)監(jiān)聽(tīng)器中某一個(gè)添加.stop修飾。那么這個(gè)傳遞過(guò)程就會(huì)在此終止。

圖2.傳遞中斷

? ? ? ? 如上圖，藍(lán)色箭頭部分，本該發(fā)生的傳遞被stop中斷，因此最后只能輸出123。

項(xiàng)目中的應(yīng)用

? ? ? ? 捕獲在項(xiàng)目中使用很少，我們一般使用stop來(lái)阻止事件冒泡。

圖3.顯示栗子

圖4.代碼栗子

? ? ? ? 我們做如上舉例，當(dāng)我們點(diǎn)擊這條信息的div我們要“顯示信息詳情”，當(dāng)我們點(diǎn)擊刪除按鈕，我們要“刪除這條信息”?，F(xiàn)在的圖4的代碼是正確的，如果我們把button中click的修飾符stop去除，那么我們點(diǎn)擊按鈕時(shí)會(huì)先“刪除這條信息”，再“顯示信息詳情”。沒(méi)有阻止傳遞的情況下，因?yàn)槭录拿芭?，div的click也會(huì)被觸發(fā)。

目標(biāo)Dom的特殊性

? ? ? ? 我們點(diǎn)擊的目標(biāo)Dom是有一點(diǎn)特殊的。目標(biāo)Dom會(huì)先執(zhí)行默認(rèn)再捕獲。這句話什么意思呢，我們依然舉個(gè)栗子來(lái)說(shuō)。如圖5，我把冒泡輸出加上.1與捕獲做區(qū)分。我分別點(diǎn)擊5號(hào)圖層，4號(hào)a標(biāo)簽。
點(diǎn)擊5號(hào)圖層時(shí)我們出現(xiàn)的結(jié)果是【1? ? ?2? ? ?3? ? ?4? ? ?4.1? ? ?3.1? ? ?2.1? ? ?1.1】（正常）
點(diǎn)擊4號(hào)標(biāo)簽時(shí)我們出現(xiàn)的結(jié)果是【1? ? ?2? ? ?3? ? ?4.1? ? ?4? ? ?3.1? ? ?2.1? ? ?1.1】（目標(biāo)Dom特殊性）
我們點(diǎn)擊目標(biāo)Dom會(huì)使目標(biāo)Dom上的冒泡監(jiān)聽(tīng)先執(zhí)行。
一般情況我們不會(huì)吧冒泡和捕獲一起使用，甚至我們很少使用捕獲。本特殊性實(shí)際應(yīng)用幾乎不會(huì)發(fā)生。

圖5.目標(biāo)Dom的特殊性

前端豆知識(shí)，很小卻有用