【Vue.js 牛刀小試】：第三章 - 事件修飾符的使用

時間 2019-11-07

原文原文鏈接

系列目錄地址

1、基礎知識概覽

前言

熟悉了 Vue 的指令系統後，在實際開發中，不可避免的會使用到對於事件的操做，如何處理 DOM 事件流，成爲咱們必需要掌握的技能。不一樣於傳統的前端開發，在 Vue 中給咱們提供了事件修飾符這一利器，使咱們能夠便捷的處理 DOM 事件，本章，一塊兒來學習如何使用事件修飾符來實現對於 DOM 事件流的操做。html

倉儲地址：Chapter01-Rookie Event Modifiers前端

乾貨合集

1、 DOM 事件流vue

有時，當咱們須要完成頁面中的某些功能時，咱們要在須要實現功能的頁面元素上使用 v-on 指令去監聽 DOM 事件，在 html4 時代瀏覽器如何肯定頁面的哪一部分會擁有特定的事件時，IE 和 Netscape 的開發團隊提出了兩個截然相反的概念。這一差別，也使咱們在寫代碼中須要考慮如何去處理 DOM 的事件細節。爲了解決這一問題，vue 給咱們提供了事件修飾符這一利器，它使咱們的方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。git

一些涉及到概念：程序員

一、事件：用戶設定或者是瀏覽器自身執行的某種動做。例如click(點擊)、load(加載)、mouseover(鼠標懸停)、change(改變)等等github

二、事件處理程序：爲了實現某個事件的功能而構建的函數方法，也可稱爲事件監聽器編程

三、DOM事件流：描述的是從頁面中接收事件的順序,也可理解爲事件在頁面中傳播的順序segmentfault

在DOM事件流中存在着三個階段：事件捕獲階段、處於目標階段、事件冒泡階段瀏覽器

事件捕獲（event capture）:當鼠標點擊或者觸發DOM事件時，瀏覽器會從根節點開始由外到內進行事件傳播，即點擊了子元素，若是父元素經過事件捕獲方式註冊了對應的事件的話，會先觸發父元素綁定的事件app

事件冒泡（event bubbing）:當鼠標點擊或者觸發DOM事件時，瀏覽器會從根節點開始由內到外進行事件傳播，即點擊了子元素，則先觸發子元素綁定的事件，逐步擴散到父元素綁定的事件

以前咱們提到的 IE 和 Netscape 的開發團隊提出了兩個截然相反的事件流概念，IE 採起的是事件冒泡流，而標準的瀏覽器的事件流則是事件捕獲流。因此，爲了兼容 IE 咱們須要改變某些的寫法。

2、事件修飾符

一、.stop：阻止事件冒泡

在下面的示例中，咱們分別建立了一個 button 的點擊事件和外側的 div 的點擊事件，根據事件的冒泡機制咱們能夠得知，當咱們點擊了按鈕以後，會擴散到父元素，從而觸發父元素的點擊事件，具體的結果也以下圖所示：

<div id="app" class="divDefault">
    <div id="div1" @click="divHandlerClick">
        <input type="button" value="點擊" @click="btnHandlerClick" />
    </div>
</div>

<script> var vm = new Vue({ el: '#app', data: {}, methods: { divHandlerClick() { alert('我是div的點擊事件！') }, btnHandlerClick() { alert('我是button的點擊事件') } } }); </script>
複製代碼

這時候，若是咱們不但願出現事件冒泡，則可使用 Vue 內置的修飾符便捷的阻止事件冒泡的產生。由於咱們是點擊 button 後產生的事件冒泡，咱們只須要在 button 的點擊事件上加上 stop 修飾符便可，示例代碼以下。

<input type="button" value="點擊" @click.stop="btnHandlerClick" />
複製代碼

二、.prevent：阻止默認事件

阻止默認事件這個也很好理解，有些標籤自己會存在事件，例如，a 標籤的跳轉，form 表單中 submit 按鈕的提交事件等等，在某些時候咱們只想執行咱們本身設置的事件，這時，就須要阻止標籤的默認事件的執行，原生的 js 咱們可使用 preventDefault 方法來實現，而在 Vue 中，咱們只須要使用 prevent 關鍵字就能夠了。

在下面的示例中，咱們爲 a 標籤添加了一個點擊事件，因爲 a 標籤自己具備默認的跳轉事件，此時，當咱們點擊後，最終仍是會執行 a 標籤的默認事件。

<a href="http://www.baidu.com" @click="aHandlerClick">連接跳轉</a>

<script> var vm = new Vue({ el: '#app', data: {}, methods: { aHandlerClick() { alert('我是a標籤的點擊事件') } } }); </script>
複製代碼

在 Vue 中，當咱們想要阻止元素的默認事件，只須要在綁定的事件後使用 prevent 修飾符便可，示例代碼以下。

<a href="http://www.baidu.com" @click.prevent="aHandlerClick">連接跳轉</a>
複製代碼

三、.capture：添加事件監聽器時使用事件捕獲模式

在上面的學習中咱們瞭解到，事件捕獲模式與事件冒泡模式是一對相反的事件處理流程，當咱們想要將頁面元素的事件流改成事件捕獲模式時，只須要在父級元素的事件上使用 capture 修飾符便可，仍是上面的例子的代碼，當咱們在 div 綁定的點擊事件上使用 capture 修飾符後，咱們點擊按鈕首先觸發的就是最外側的 div 的事件。

<div id="app" class="divDefault">
    <div id="div1" @click.capure="divHandlerClick">
        <input type="button" value="點擊" @click="btnHandlerClick" />
    </div>
</div>
複製代碼

四、.self：只當在 event.target 是當前元素自身時觸發處理函數（好比不是子元素冒泡引發的事件觸發）

在上面的例子中，咱們爲 div 綁定了一個點擊事件，而咱們的本意多是隻有當咱們點擊 div 後觸發這個事件，而實際狀況是事件冒泡仍是事件捕獲都會觸發這個事件，這與咱們的本意是不符的。在 Vue 中，咱們就可使用 self 修飾符去修飾事件，讓這個事件只在咱們想要觸發時觸發。

<div id="app" class="divDefault">
    <div id="div1" @click.self="divHandlerClick">
        <input type="button" value="點擊" @click="btnHandlerClick" />
    </div>
</div>
複製代碼

五、.once：事件只觸發一次

當咱們僅僅想對綁定的事件只在第一次的時候觸發，這時咱們就可使用 once 修飾符去修飾綁定的事件。例如在下面的代碼中，只有第一次點擊時纔會觸發綁定的事件，以後點擊都不會觸發。

<input type="button" value="點擊" @click.once="btnHandlerClick" />
複製代碼

六、.passive：滾動事件的默認行爲 (即滾動行爲) 將會當即觸發

在頁面滾動的時候，瀏覽器會在整個事件處理完畢以後再觸發滾動，由於瀏覽器並不知道這個事件是否在其處理函數中被調用了 event.preventDefault()，而 passive 修飾符用來進一步告訴瀏覽器這個事件的默認行爲不會被取消，即使用 passive 修飾符後表示綁定的事件永遠不會調用 event.preventDefault()。

總結

一、使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用 v-on:click.prevent.self會阻止全部的點擊，而v-on:click.self.prevent 只會阻止對元素自身的點擊。

二、不要把 .passive 和 .prevent 一塊兒使用，由於 .prevent 將會被忽略，同時瀏覽器可能會向你展現一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行爲。

參考

一、JavaScript事件流

二、JavaScript:深刻理解事件流

三、理解DOM事件流的三個階段

四、JavaScript 詳說事件機制之冒泡、捕獲、傳播、委託

五、vue從入門到進階：指令與事件（二）

佔坑

        做者：墨墨墨墨小宇
        我的簡介：96年生人，出生於安徽某四線城市，畢業於Top 10000000 院校。.NET程序員，槍手死忠，喵星人。於2016年12月開始.NET程序員生涯，微軟.NET技術的堅決堅持者，立志成爲雲養貓的少年中面向谷歌編程最厲害的.NET程序員。
        我的博客：yuiter.com
        博客園博客：www.cnblogs.com/danvic712