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

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

成都創(chuàng)新互聯(lián)公司是一家專業(yè)從事做網(wǎng)站、網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司。作為專業(yè)的建站公司,成都創(chuàng)新互聯(lián)公司依托的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、成都營銷網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開發(fā)服務(wù)！

1、 DOM 事件流

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

一些涉及到概念：

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

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

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

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

a）事件捕獲（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ā)父元素綁定的事件

b）事件冒泡（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 我們需要改變某些的寫法。

2、 事件修飾符

a）.stop：阻止事件冒泡

在下面的示例中，我們分別創(chuàng)建了一個(gè) button 的點(diǎn)擊事件和外側(cè)的 div 的點(diǎn)擊事件，根據(jù)事件的冒泡機(jī)制我們可以得知，當(dāng)我們點(diǎn)擊了按鈕之后，會(huì)擴(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)事件這個(gè)也很好理解，有些標(biāo)簽本身會(huì)存在事件，例如，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)簽添加了一個(gè)點(diǎn)擊事件，由于 a 標(biāo)簽本身具有默認(rèn)的跳轉(zhuǎn)事件，此時(shí)，當(dāng)我們點(diǎn)擊后，最終還是會(huì)執(zhí)行 a 標(biāo)簽的默認(rèn)事件。

 <a href="http://www.baidu.com" @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 href="http://www.baidu.com" @click.prevent="aHandlerClick">鏈接跳轉(zhuǎn)</a>

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

在上面的學(xué)習(xí)中我們了解到，事件捕獲模式與事件冒泡模式是一對(duì)相反的事件處理流程，當(dāng)我們想要將頁面元素的事件流改為事件捕獲模式時(shí)，只需要在父級(jí)元素的事件上使用 capture 修飾符即可，還是上面的例子的代碼，當(dāng)我們?cè)?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 綁定了一個(gè)點(diǎn)擊事件，而我們的本意可能是只有當(dāng)我們點(diǎn)擊 div 后觸發(fā)這個(gè)事件，而實(shí)際情況是事件冒泡還是事件捕獲都會(huì)觸發(fā)這個(gè)事件，這與我們的本意是不符的。在 Vue 中，我們就可以使用 self 修飾符去修飾事件，讓這個(gè)事件只在我們想要觸發(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)我們僅僅想對(duì)綁定的事件只在第一次的時(shí)候觸發(fā)，這時(shí)我們就可以使用 once 修飾符去修飾綁定的事件。例如在下面的代碼中，只有第一次點(diǎn)擊時(shí)才會(huì)觸發(fā)綁定的事件，之后點(diǎn)擊都不會(huì)觸發(fā)。

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

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

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

看完上述內(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)的支持。

文章標(biāo)題：如何在Vue.js中使用事件修飾符
URL地址：http://muchs.cn/article38/pishpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站、企業(yè)建站、網(wǎng)站制作、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)