一、前言

熟悉了 Vue 的指令系統(tǒng)后，在實(shí)際開發(fā)中，不可避免的會使用到對于事件的操作，如何處理 DOM 事件流，成為我們必須要掌握的技能。不同于傳統(tǒng)的前端開發(fā)，在 Vue 中給我們提供了事件修飾符這一利器，使我們可以便捷的處理 DOM 事件，本章，一起來學(xué)習(xí)如何使用事件修飾符來實(shí)現(xiàn)對于 DOM 事件流的操作。

倉儲地址： https://github.com/Lanesra712/VueTrial/tree/master/Chapter01-Rookie/directives

 二、干貨合集

1、 DOM 事件流

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

一些涉及到概念：

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

b）事件處理程序：為了實(shí)現(xiàn)某個事件的功能而構(gòu)建的函數(shù)方法，也可稱為事件監(jiān)聽器

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

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

a）事件捕獲（event capture）:當(dāng)鼠標(biāo)點(diǎn)擊或者觸發(fā) DOM 事件時(shí)，瀏覽器會從根節(jié)點(diǎn)開始 由外到內(nèi) 進(jìn)行事件傳播，即點(diǎn)擊了子元素，如果父元素通過事件捕獲方式注冊了對應(yīng)的事件的話，會先觸發(fā)父元素綁定的事件

b）事件冒泡（event bubbing）:當(dāng)鼠標(biāo)點(diǎn)擊或者觸發(fā) DOM 事件時(shí)，瀏覽器會從根節(jié)點(diǎn)開始 由內(nèi)到外 進(jìn)行事件傳播，即點(diǎn)擊了子元素，則先觸發(fā)子元素綁定的事件，逐步擴(kuò)散到父元素綁定的事件

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

2、 事件修飾符

a）.stop：阻止事件冒泡

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

<div id="app" class="divDefault">
  <div id="div1" @click="divHandlerClick">
   <input type="button" value="點(diǎn)擊" @click="btnHandlerClick" />
  </div>
 </div> 
 <script>
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {
    divHandlerClick() {
     alert('我是div的點(diǎn)擊事件！')
    },
    btnHandlerClick() {
     alert('我是button的點(diǎn)擊事件')
    }
   }
  });
 </script>

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

<input type="button" value="點(diǎn)擊" @click.stop="btnHandlerClick" />

b）.prevent：阻止默認(rèn)事件

阻止默認(rèn)事件這個也很好理解，有些標(biāo)簽本身會存在事件，例如，a 標(biāo)簽的跳轉(zhuǎn)，form 表單中 submit 按鈕的提交事件等等，在某些時(shí)候我們只想執(zhí)行我們自己設(shè)置的事件，這時(shí)，就需要阻止標(biāo)簽的默認(rèn)事件的執(zhí)行，原生的 js 我們可以使用 preventDefault 方法來實(shí)現(xiàn)，而在 Vue 中，我們只需要使用 prevent 關(guān)鍵字就可以了。

在下面的示例中，我們?yōu)?a 標(biāo)簽添加了一個點(diǎn)擊事件，由于 a 標(biāo)簽本身具有默認(rèn)的跳轉(zhuǎn)事件，此時(shí)，當(dāng)我們點(diǎn)擊后，最終還是會執(zhí)行 a 標(biāo)簽的默認(rèn)事件。

 <a  @click="aHandlerClick">鏈接跳轉(zhuǎn)</a> 
 <script>
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {
    aHandlerClick() {
     alert('我是a標(biāo)簽的點(diǎn)擊事件')
    }
   }
  });
 </script>

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

<a  @click.prevent="aHandlerClick">鏈接跳轉(zhuǎn)</a>

c）.capture：添加事件監(jiān)聽器時(shí)使用事件捕獲模式

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

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

d）.self：只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)（比如不是子元素冒泡引起的事件觸發(fā)）

在上面的例子中，我們?yōu)?div 綁定了一個點(diǎn)擊事件，而我們的本意可能是只有當(dāng)我們點(diǎn)擊 div 后觸發(fā)這個事件，而實(shí)際情況是事件冒泡還是事件捕獲都會觸發(fā)這個事件，這與我們的本意是不符的。在 Vue 中，我們就可以使用 self 修飾符去修飾事件，讓這個事件只在我們想要觸發(fā)時(shí)觸發(fā)。

<div id="app" class="divDefault">
 <div id="div1" @click.self="divHandlerClick">
  <input type="button" value="點(diǎn)擊" @click="btnHandlerClick" />
 </div>
</div>

e）.once：事件只觸發(fā)一次

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

<input type="button" value="點(diǎn)擊" @click.once="btnHandlerClick" />

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

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

 三、總結(jié)

1、事件修飾符的使用順序很重要

使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會阻止對元素自身的點(diǎn)擊。

2、.passive 和 .prevent不能一起使用

不要把 .passive 和 .prevent 一起使用，因?yàn)?.prevent 將會被忽略，同時(shí)瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認(rèn)行為。

以上所述是小編給大家介紹的Vue.js 事件修飾符的使用教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論