Vue中如何使用事件修飾符，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站主要從事網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)漣水,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108

        一、 DOM 事件流
        有時(shí)，當(dāng)我們需要完成頁(yè)面中的某些功能時(shí)，我們要在需要實(shí)現(xiàn)功能的頁(yè)面元素上使用 v-on 指令去監(jiān)聽 DOM 事件，在 html4 時(shí)代瀏覽器如何確定頁(yè)面的哪一部分會(huì)擁有特定的事件時(shí)，IE 和 Netscape 的開發(fā)團(tuán)隊(duì)提出了兩個(gè)截然相反的概念。這一差異，也使我們?cè)趯懘a中需要考慮如何去處理 DOM 的事件細(xì)節(jié)。為了解決這一問題，vue 給我們提供了事件修飾符這一利器，它使我們的方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。
        一些涉及到概念：
        1、事件：用戶設(shè)定或者是瀏覽器自身執(zhí)行的某種動(dòng)作。例如click(點(diǎn)擊)、load(加載)、mouseover(鼠標(biāo)懸停)、change(改變)等等
        2、事件處理程序：為了實(shí)現(xiàn)某個(gè)事件的功能而構(gòu)建的函數(shù)方法，也可稱為事件監(jiān)聽器
        3、DOM 事件流：描述的是從頁(yè)面中接收事件的順序,也可理解為事件在頁(yè)面中傳播的順序

        在 DOM 事件流中存在著三個(gè)階段：事件捕獲階段、處于目標(biāo)階段、事件冒泡階段
        事件捕獲（event capture）:當(dāng)鼠標(biāo)點(diǎn)擊或者觸發(fā) DOM 事件時(shí)，瀏覽器會(huì)從根節(jié)點(diǎn)開始由外到內(nèi)進(jìn)行事件傳播，即點(diǎn)擊了子元素，如果父元素通過事件捕獲方式注冊(cè)了對(duì)應(yīng)的事件的話，會(huì)先觸發(fā)父元素綁定的事件
        事件冒泡（event bubbing）:當(dāng)鼠標(biāo)點(diǎn)擊或者觸發(fā) DOM 事件時(shí)，瀏覽器會(huì)從根節(jié)點(diǎn)開始由內(nèi)到外進(jìn)行事件傳播，即點(diǎn)擊了子元素，則先觸發(fā)子元素綁定的事件，逐步擴(kuò)散到父元素綁定的事件
        之前我們提到的 IE 和 Netscape 的開發(fā)團(tuán)隊(duì)提出了兩個(gè)截然相反的事件流概念，IE 采取的是事件冒泡流，而標(biāo)準(zhǔn)的瀏覽器的事件流則是事件捕獲流。所以，為了兼容 IE 我們需要改變某些的寫法。

        二、 事件修飾符
        1、.stop：阻止事件冒泡
        在下面的示例中，我們分別創(chuàng)建了一個(gè) button 的點(diǎn)擊事件和外側(cè)的 div 的點(diǎn)擊事件，根據(jù)事件的冒泡機(jī)制我們可以得知，當(dāng)我們點(diǎn)擊了按鈕之后，會(huì)擴(kuò)散到父元素，從而觸發(fā)父元素的點(diǎn)擊事件，具體的結(jié)果也如下圖所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

        這時(shí)候，如果我們不希望出現(xiàn)事件冒泡，則可以使用 Vue 內(nèi)置的修飾符便捷的阻止事件冒泡的產(chǎn)生。因?yàn)槲覀兪屈c(diǎn)擊 button 后產(chǎn)生的事件冒泡，我們只需要在 button 的點(diǎn)擊事件上加上 stop 修飾符即可，示例代碼如下。

1

        2、.prevent：阻止默認(rèn)事件
        阻止默認(rèn)事件這個(gè)也很好理解，有些標(biāo)簽本身會(huì)存在事件，例如，a 標(biāo)簽的跳轉(zhuǎn)，form 表單中 submit 按鈕的提交事件等等，在某些時(shí)候我們只想執(zhí)行我們自己設(shè)置的事件，這時(shí)，就需要阻止標(biāo)簽的默認(rèn)事件的執(zhí)行，原生的 js 我們可以使用 preventDefault 方法來(lái)實(shí)現(xiàn)，而在 Vue 中，我們只需要使用 prevent 關(guān)鍵字就可以了。
        在下面的示例中，我們?yōu)?a 標(biāo)簽添加了一個(gè)點(diǎn)擊事件，由于 a 標(biāo)簽本身具有默認(rèn)的跳轉(zhuǎn)事件，此時(shí)，當(dāng)我們點(diǎn)擊后，最終還是會(huì)執(zhí)行 a 標(biāo)簽的默認(rèn)事件。

1
2
3
4
5
6
7
8
9
10
11
12
13

鏈接跳轉(zhuǎn)

        在 Vue 中，當(dāng)我們想要阻止元素的默認(rèn)事件，只需要在綁定的事件后使用 prevent 修飾符即可，示例代碼如下。

1

鏈接跳轉(zhuǎn)

        3、.capture：添加事件監(jiān)聽器時(shí)使用事件捕獲模式
        在上面的學(xué)習(xí)中我們了解到，事件捕獲模式與事件冒泡模式是一對(duì)相反的事件處理流程，當(dāng)我們想要將頁(yè)面元素的事件流改為事件捕獲模式時(shí)，只需要在父級(jí)元素的事件上使用 capture 修飾符即可，還是上面的例子的代碼，當(dāng)我們?cè)?div 綁定的點(diǎn)擊事件上使用 capture 修飾符后，我們點(diǎn)擊按鈕首先觸發(fā)的就是最外側(cè)的 div 的事件。

1
2
3
4
5

        4、.self：只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)（比如不是子元素冒泡引起的事件觸發(fā)）
        在上面的例子中，我們?yōu)?div 綁定了一個(gè)點(diǎn)擊事件，而我們的本意可能是只有當(dāng)我們點(diǎn)擊 div 后觸發(fā)這個(gè)事件，而實(shí)際情況是事件冒泡還是事件捕獲都會(huì)觸發(fā)這個(gè)事件，這與我們的本意是不符的。在 Vue 中，我們就可以使用 self 修飾符去修飾事件，讓這個(gè)事件只在我們想要觸發(fā)時(shí)觸發(fā)。

1
2
3
4
5

        5、.once：事件只觸發(fā)一次
        當(dāng)我們僅僅想對(duì)綁定的事件只在第一次的時(shí)候觸發(fā)，這時(shí)我們就可以使用 once 修飾符去修飾綁定的事件。例如在下面的代碼中，只有第一次點(diǎn)擊時(shí)才會(huì)觸發(fā)綁定的事件，之后點(diǎn)擊都不會(huì)觸發(fā)。

1

        6、.passive：滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā)
        在頁(yè)面滾動(dòng)的時(shí)候，瀏覽器會(huì)在整個(gè)事件處理完畢之后再觸發(fā)滾動(dòng)，因?yàn)闉g覽器并不知道這個(gè)事件是否在其處理函數(shù)中被調(diào)用了 event.preventDefault()，而 passive 修飾符用來(lái)進(jìn)一步告訴瀏覽器這個(gè)事件的默認(rèn)行為不會(huì)被取消，即 使用 passive 修飾符后表示綁定的事件永遠(yuǎn)不會(huì)調(diào)用 event.preventDefault()。

總結(jié)

        1、使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。
        2、不要把 .passive 和 .prevent 一起使用，因?yàn)?.prevent 將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告。請(qǐng)記住，.passive 會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。