如何在Vue.js中使用事件修飾符

如何在Vue.js中使用事件修飾符？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

1、 DOM 事件流

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

一些涉及到概念：

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

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

c）DOM 事件流：描述的是從頁面中接收事件的順序,也可理解為事件在頁面中傳播的順序

在 DOM 事件流中存在著三個階段：事件捕獲階段、處于目標階段、事件冒泡階段。

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

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

之前我們提到的 IE 和 Netscape 的開發團隊提出了兩個截然相反的事件流概念，IE 采取的是事件冒泡流，而標準的瀏覽器的事件流則是事件捕獲流。所以，為了兼容 IE 我們需要改變某些的寫法。

2、 事件修飾符

a）.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" />

b）.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>

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

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

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

d）.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>

e）.once：事件只觸發一次

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

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

f）.passive：滾動事件的默認行為 (即滾動行為) 將會立即觸發

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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。