Vue 事件處理函數的綁定示例詳解
正文
在 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 事件處理函數綁定的資料請關註WalkonNet其它相關文章！