目錄

• 正文
• Vue 的事件處理綁定
• 事件修飾符
• 按鍵修飾符
• Vue 為什么會(huì)在 HTML 中監(jiān)聽事件？

正文

在 JS 中「事件」是不需要綁定的，瀏覽器自帶了許多的事件，每個(gè)事件都可以去綁定「處理器（處理函數(shù)）」。

事件 ==> 用戶行為 ==> 觸發(fā)瀏覽器的事件 ==> 執(zhí)行對(duì)應(yīng)的事件處理函數(shù)

我們通常通過addEventListenet方法去給事件綁定處理函數(shù)：

document.addEventListenet("click", function () {
  // do...
}, flase);

需要注意的是addEventListenet只是「綁定」事件處理函數(shù)并不是「執(zhí)行」！處理函數(shù)只會(huì)在對(duì)應(yīng)事件觸發(fā)的時(shí)候才會(huì)進(jìn)行執(zhí)行。

某些情況下，我們需要把處理函數(shù)獨(dú)立出去，并且需要更改this的執(zhí)行，這是因?yàn)槭录幚砗瘮?shù)的this指向元素本身，也就意味著我們不能使用.call來更改this的指向，因?yàn)?code>.call方法會(huì)立即執(zhí)行函數(shù)！

// 這會(huì)導(dǎo)致 test 立即執(zhí)行！
document.addEventListenet("click", test.call(this), flase);

// 可以利用 .bind 方法放心的去指向 this，因?yàn)?bind 不會(huì)立即執(zhí)行
document.addEventListenet("click", test.bind(this), flase);

Vue 的事件處理綁定

來到Vue，Vue提供了v-on指令讓開發(fā)者對(duì)元素綁定事件處理函數(shù)，例如：

<div v-on:click="methodName"></div>
<!-- 或者使用 @click 對(duì) v-on 進(jìn)行簡(jiǎn)寫 -->
<div @click="handler"></div>

v-on的值可以是JS表達(dá)式：

<button @click="count += 1">Add</button>

不推薦這樣做，應(yīng)該把邏輯放到methods里面處理。

v-on的值還可以是一個(gè)方法事件處理器：

 <button @click="onClickAdd">Add</button>

@click接受一個(gè)方法名或?qū)δ硞€(gè)方法的調(diào)用。

當(dāng)通過方法名去綁定事件處理函數(shù)的時(shí)候，我們可以給方法傳遞參數(shù)：

<div>
  <h1>{{ count }}</h1>
  <button @click="onClickAdd(2)">Add</button>
  <button @click="onClickMinus(2, $event)">Minus</button>
</div>

以上代碼，button在綁定了onClickAdd和onClickMinus處理函數(shù)后不會(huì)立即執(zhí)行，而是當(dāng)事件觸發(fā)后才執(zhí)行，這會(huì)開頭我們說的addEventListenet是一樣的！

而onClickAdd和onClickMinus的括號(hào)是為了方便我們傳遞想要參數(shù)方便在methdos里進(jìn)行處理。

這里有一個(gè)特殊的參數(shù)$event，該屬性是Vue內(nèi)部封裝的一個(gè)屬性，表示觸發(fā)事件的事件對(duì)象。

const app = {
  template: `<button @click="onClickMinus(2, $event)">Minus</button>`,
  data(){
    return {
      count: 0
    }
  }
  methods:{
    onClickMinus(num, e){
      console.log(e);
      this.count += num;
    }
  }
}

v-on指令還可以同時(shí)綁定多個(gè)事件處理函數(shù)，例如：

<div>
  <h1>{{ count }}</h1>
  <button @click="onClickAdd(),setLog()">Add</button>
  <button @click="onClickMinus">Minus</button>
</div>

只要在兩個(gè)方法的中間用,分隔就可以同時(shí)綁定兩個(gè)事件處理函數(shù)啦。

事件修飾符

我們?cè)谔幚硎录r(shí)可能會(huì)調(diào)用event.preventDefault()或event.stopPropagation()是很常見的。Vue提供了一套「修飾符」來幫助我們完成這些事件，這么做的目的是讓開發(fā)者更專注于數(shù)據(jù)邏輯而不用去處理DOM事件的細(xì)節(jié)。

修飾符是用 . 表示的指令后綴，包含以下這些：

• .stop：阻止事件冒泡。
• .prevent：阻止事件的默認(rèn)行為。
• .self：當(dāng)event.target是元素本身時(shí)才會(huì)觸發(fā)事件處理器 。
• .capture：采用事件捕獲。
• .once：事件調(diào)用一次后，自動(dòng)移除監(jiān)聽器。
• .passive：修飾符一般用于觸摸事件的監(jiān)聽器，可以用來改善移動(dòng)端設(shè)備的滾屏性能。

?? 注意

不能同時(shí)使用.passive和.prevent，因?yàn)?code>.passive已經(jīng)向?yàn)g覽器表明了你不想阻止事件的默認(rèn)行為。
如果你這么做了，則.prevent會(huì)被忽略，并且瀏覽器會(huì)拋出警告。

<!-- 單擊事件將停止傳遞 -->
<a @click.stop="doThis"></a>

<!-- 提交事件將不再重新加載頁面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修飾語可以使用鏈?zhǔn)綍鴮?-->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修飾符 -->
<form @submit.prevent></form>

<!-- 僅當(dāng) event.target 是元素本身時(shí)才會(huì)觸發(fā)事件處理器 -->
<!-- 例如：事件處理器不來自子元素 -->
<div @click.self="doThat">...</div>

使用修飾符時(shí)需要注意調(diào)用順序，因?yàn)橄嚓P(guān)代碼是以相同的順序生成的。因此使用@click.prevent.self會(huì)阻止元素及其子元素的所有點(diǎn)擊事件的默認(rèn)行為，而@click.self.prevent則只會(huì)阻止對(duì)元素本身的點(diǎn)擊事件的默認(rèn)行為。

按鍵修飾符

我們通過可能還需要通過event.keycode來判斷用戶觸發(fā)的按鍵，Vue允許在v-on或@監(jiān)聽按鍵事件時(shí)添加按鍵修飾符，例如：

<!-- 僅在 `key` 為 `Enter` 時(shí)調(diào)用 `submit` -->
<input @keyup.enter="submit" />

你可以直接使用KeyboardEvent.key暴露的按鍵名稱作為修飾符，但需要轉(zhuǎn)為 kebab-case 形式。

<input @keyup.page-down="onPageDown" />

Vue為一些常用的按鍵提供了別名：

• .enter
• .tab
• .delete (捕獲“Delete”和“Backspace”兩個(gè)按鍵)
• .esc
• .space
• .up
• .down
• .left
• .right

你可以使用以下系統(tǒng)按鍵修飾符來觸發(fā)鼠標(biāo)或鍵盤事件監(jiān)聽器，只有當(dāng)按鍵被按下時(shí)才會(huì)觸發(fā)。

• .ctrl
• .alt
• .shift
• .meta

例如：

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 點(diǎn)擊 -->
<div @click.ctrl="doSomething">Do something</div>

請(qǐng)注意，系統(tǒng)按鍵修飾符和常規(guī)按鍵不同。與keyup事件一起使用時(shí)，該按鍵必須在事件發(fā)出時(shí)處于按下狀態(tài)。
換句話說，keyup.ctrl只會(huì)在你仍然按住ctrl但松開了另一個(gè)鍵時(shí)被觸發(fā)。若你單獨(dú)松開ctrl鍵將不會(huì)觸發(fā)。

.exact修飾符允許控制觸發(fā)一個(gè)事件所需的確定組合的系統(tǒng)按鍵修飾符。

<!-- 當(dāng)按下 Ctrl 時(shí)，即使同時(shí)按下 Alt 或 Shift 也會(huì)觸發(fā) -->
<button @click.ctrl="onClick">A</button>

<!-- 僅當(dāng)按下 Ctrl 且未按任何其他鍵時(shí)才會(huì)觸發(fā) -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 僅當(dāng)沒有按下任何系統(tǒng)按鍵時(shí)觸發(fā) -->
<button @click.exact="onClick">A</button>

你可以使用以下鼠標(biāo)按鍵修飾符來觸發(fā)鼠標(biāo)事件監(jiān)聽器：

• .left
• .right
• .middle

這些修飾符將處理程序限定為由特定鼠標(biāo)按鍵觸發(fā)的事件。

Vue 為什么會(huì)在 HTML 中監(jiān)聽事件？

我們發(fā)現(xiàn)Vue是在template中直接綁定事件的，這違背了「關(guān)注點(diǎn)分離」的概念。但是不用擔(dān)心，Vue把事件處理方法和表達(dá)式都嚴(yán)格的綁定到當(dāng)前視圖的ViewModel上，他不會(huì)導(dǎo)致任何維護(hù)上的困難。
當(dāng)我們使用v-on在視圖上綁定事件處理，有幾個(gè)好處：

1、掃一眼HTML模版便能輕松定位JavaScript里面對(duì)應(yīng)的方法。

2、無須在JavaScript里手動(dòng)綁定事件，你的ViewModel代碼可以是非純粹的邏輯，和DOM完全解藕，更容易測(cè)試。

3、當(dāng)一個(gè)ViewModel銷毀的時(shí)候，所有的事件處理器都會(huì)自動(dòng)被刪除。你需要擔(dān)心如何清理它們。

以上就是Vue 事件處理函數(shù)的綁定示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue 事件處理函數(shù)綁定的資料請(qǐng)關(guān)注其它相關(guān)文章！