前言
熟悉了 Vue 的指令系統後，在實際開發中，不可避免的會使用到對於事件的操作，如何處理 DOM 事件流，成為我們必須要掌握的技能。不同於傳統的前端開發，在 Vue 中給我們提供了事件修飾符這一利器，使我們可以便捷的處理 DOM 事件，本章，一起來學習如何使用事件修飾符來實現對於 DOM 事件流的操作。
系列目錄地址：Vue.js 牛刀小試
倉儲地址：Chapter01-Rookie Event Modifiers
乾貨合集
一、 DOM 事件流
有時，當我們需要完成頁面中的某些功能時，我們要在需要實現功能的頁面元素上使用 v-on 指令去監聽 DOM 事件，在 html4 時代瀏覽器如何確定頁面的哪一部分會擁有特定的事件時，IE 和 Netscape 的開發團隊提出了兩個截然相反的概念。這一差異，也使我們在寫程式碼中需要考慮如何去處理 DOM 的事件細節。為了解決這一問題，vue 給我們提供了事件修飾符這一利器，它使我們的方法只有純粹的資料邏輯，而不是去處理 DOM 事件細節。
一些涉及到概念：
1、事件：使用者設定或者是瀏覽器自身執行的某種動作。例如click(點選)、load(載入)、mouseover(滑鼠懸停)、change(改變)等等
2、事件處理程式：為了實現某個事件的功能而構建的函式方法，也可稱為事件監聽器
3、DOM事件流：描述的是從頁面中接收事件的順序,也可理解為事件在頁面中傳播的順序
在DOM事件流中存在著三個階段：事件捕獲階段、處於目標階段、事件冒泡階段
事件捕獲（event capture）:當滑鼠點選或者觸發DOM事件時，瀏覽器會從根節點開始由外到內進行事件傳播，即點選了子元素，如果父元素通過事件捕獲方式註冊了對應的事件的話，會先觸發父元素繫結的事件
事件冒泡（event bubbing）:當滑鼠點選或者觸發DOM事件時，瀏覽器會從根節點開始由內到外進行事件傳播，即點選了子元素，則先觸發子元素繫結的事件，逐步擴散到父元素繫結的事件
之前我們提到的 IE 和 Netscape 的開發團隊提出了兩個截然相反的事件流概念，IE 採取的是事件冒泡流，而標準的瀏覽器的事件流則是事件捕獲流。所以，為了相容 IE 我們需要改變某些的寫法。
二、 事件修飾符
1、.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>
複製程式碼
<input type="button" value="點選" @click.stop="btnHandlerClick" />
複製程式碼
阻止預設事件這個也很好理解，有些標籤本身會存在事件，例如，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>
複製程式碼
<a href="http://www.baidu.com" @click.prevent="aHandlerClick">連結跳轉</a>
複製程式碼
在上面的學習中我們瞭解到，事件捕獲模式與事件冒泡模式是一對相反的事件處理流程，當我們想要將頁面元素的事件流改為事件捕獲模式時，只需要在父級元素的事件上使用 capture 修飾符即可，還是上面的例子的程式碼，當我們在 div 繫結的點選事件上使用 capture 修飾符後，我們點選按鈕首先觸發的就是最外側的 div 的事件。
<div id="app" class="divDefault">
<div id="div1" @click.capure="divHandlerClick">
<input type="button" value="點選" @click="btnHandlerClick" />
</div>
</div>
複製程式碼
在上面的例子中，我們為 div 繫結了一個點選事件，而我們的本意可能是隻有當我們點選 div 後觸發這個事件，而實際情況是事件冒泡還是事件捕獲都會觸發這個事件，這與我們的本意是不符的。在 Vue 中，我們就可以使用 self 修飾符去修飾事件，讓這個事件只在我們想要觸發時觸發。
<div id="app" class="divDefault">
<div id="div1" @click.self="divHandlerClick">
<input type="button" value="點選" @click="btnHandlerClick" />
</div>
</div>
複製程式碼
當我們僅僅想對繫結的事件只在第一次的時候觸發，這時我們就可以使用 once 修飾符去修飾繫結的事件。例如在下面的程式碼中，只有第一次點選時才會觸發繫結的事件，之後點選都不會觸發。
<input type="button" value="點選" @click.once="btnHandlerClick" />
複製程式碼
在頁面滾動的時候，瀏覽器會在整個事件處理完畢之後再觸發滾動，因為瀏覽器並不知道這個事件是否在其處理函式中被呼叫了 event.preventDefault()，而 passive 修飾符用來進一步告訴瀏覽器這個事件的預設行為不會被取消，即 使用 passive 修飾符後表示繫結的事件永遠不會呼叫 event.preventDefault()。
總結
1、使用修飾符時，順序很重要；相應的程式碼會以同樣的順序產生。因此，用 v-on:click.prevent.self會阻止所有的點選，而v-on:click.self.prevent 只會阻止對元素自身的點選。
2、不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的預設行為。
參考
4、JavaScript 詳說事件機制之冒泡、捕獲、傳播、委託
佔坑
作者：墨墨墨墨小宇
個人簡介：96年生人，出生於安徽某四線城市，畢業於Top 10000000 院校。.NET程式設計師，槍手死忠，喵星人。於2016年12月開始.NET程式設計師生涯，微軟.NET技術的堅定堅持者，立志成為雲養貓的少年中面向谷歌程式設計最厲害的.NET程式設計師。
個人部落格：yuiter.com
部落格園部落格：www.cnblogs.com/danvic712