目錄

• 正文
• Vue 的事件處理綁定
• 事件修飾符
• 按鍵修飾符
• Vue 為什么會在 HTML 中監聽事件？

正文

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

事件 ==> 用戶行為 ==> 觸發瀏覽器的事件 ==> 執行對應的事件處理函數

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

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

需要注意的是addEventListenet只是「綁定」事件處理函數并不是「執行」！處理函數只會在對應事件觸發的時候才會進行執行。

某些情況下，我們需要把處理函數獨立出去，并且需要更改this的執行，這是因為事件處理函數的this指向元素本身，也就意味著我們不能使用.call來更改this的指向，因為.call方法會立即執行函數！

// 這會導致 test 立即執行！
document.addEventListenet("click", test.call(this), flase);

// 可以利用 .bind 方法放心的去指向 this，因為 bind 不會立即執行
document.addEventListenet("click", test.bind(this), flase);

Vue 的事件處理綁定

來到Vue，Vue提供了v-on指令讓開發者對元素綁定事件處理函數，例如：

<div v-on:click="methodName"></div>
<!-- 或者使用 @click 對 v-on 進行簡寫 -->
<div @click="handler"></div>

v-on的值可以是JS表達式：

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

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

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

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

@click接受一個方法名或對某個方法的調用。

當通過方法名去綁定事件處理函數的時候，我們可以給方法傳遞參數：

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

以上代碼，button在綁定了onClickAdd和onClickMinus處理函數后不會立即執行，而是當事件觸發后才執行，這會開頭我們說的addEventListenet是一樣的！

而onClickAdd和onClickMinus的括號是為了方便我們傳遞想要參數方便在methdos里進行處理。

這里有一個特殊的參數$event，該屬性是Vue內部封裝的一個屬性，表示觸發事件的事件對象。

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指令還可以同時綁定多個事件處理函數，例如：

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

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

事件修飾符

我們在處理事件時可能會調用event.preventDefault()或event.stopPropagation()是很常見的。Vue提供了一套「修飾符」來幫助我們完成這些事件，這么做的目的是讓開發者更專注于數據邏輯而不用去處理DOM事件的細節。

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

• .stop：阻止事件冒泡。
• .prevent：阻止事件的默認行為。
• .self：當event.target是元素本身時才會觸發事件處理器 。
• .capture：采用事件捕獲。
• .once：事件調用一次后，自動移除監聽器。
• .passive：修飾符一般用于觸摸事件的監聽器，可以用來改善移動端設備的滾屏性能。

?? 注意

不能同時使用.passive和.prevent，因為.passive已經向瀏覽器表明了你不想阻止事件的默認行為。
如果你這么做了，則.prevent會被忽略，并且瀏覽器會拋出警告。

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

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

<!-- 修飾語可以使用鏈式書寫 -->
<a @click.stop.prevent="doThat"></a>

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

<!-- 僅當 event.target 是元素本身時才會觸發事件處理器 -->
<!-- 例如：事件處理器不來自子元素 -->
<div @click.self="doThat">...</div>

使用修飾符時需要注意調用順序，因為相關代碼是以相同的順序生成的。因此使用@click.prevent.self會阻止元素及其子元素的所有點擊事件的默認行為，而@click.self.prevent則只會阻止對元素本身的點擊事件的默認行為。

按鍵修飾符

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

<!-- 僅在 `key` 為 `Enter` 時調用 `submit` -->
<input @keyup.enter="submit" />

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

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

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

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

你可以使用以下系統按鍵修飾符來觸發鼠標或鍵盤事件監聽器，只有當按鍵被按下時才會觸發。

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

例如：

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

<!-- Ctrl + 點擊 -->
<div @click.ctrl="doSomething">Do something</div>

請注意，系統按鍵修飾符和常規按鍵不同。與keyup事件一起使用時，該按鍵必須在事件發出時處于按下狀態。
換句話說，keyup.ctrl只會在你仍然按住ctrl但松開了另一個鍵時被觸發。若你單獨松開ctrl鍵將不會觸發。

.exact修飾符允許控制觸發一個事件所需的確定組合的系統按鍵修飾符。

<!-- 當按下 Ctrl 時，即使同時按下 Alt 或 Shift 也會觸發 -->
<button @click.ctrl="onClick">A</button>

<!-- 僅當按下 Ctrl 且未按任何其他鍵時才會觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 僅當沒有按下任何系統按鍵時觸發 -->
<button @click.exact="onClick">A</button>

你可以使用以下鼠標按鍵修飾符來觸發鼠標事件監聽器：

• .left
• .right
• .middle

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

Vue 為什么會在 HTML 中監聽事件？

我們發現Vue是在template中直接綁定事件的，這違背了「關注點分離」的概念。但是不用擔心，Vue把事件處理方法和表達式都嚴格的綁定到當前視圖的ViewModel上，他不會導致任何維護上的困難。
當我們使用v-on在視圖上綁定事件處理，有幾個好處：

1、掃一眼HTML模版便能輕松定位JavaScript里面對應的方法。

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

3、當一個ViewModel銷毀的時候，所有的事件處理器都會自動被刪除。你需要擔心如何清理它們。

以上就是Vue 事件處理函數的綁定示例詳解的詳細內容，更多關于Vue 事件處理函數綁定的資料請關注其它相關文章！