此間少年_ ·1. 前言
本小節我們介紹 Vue 中如何進行事件處理。在章節 2.2 中我們已經介紹了指令 v-on，本章節我們將詳細介紹在 v-on 的一些用法。包括如何傳遞參數、如何使用事件修飾符等。其中，事件修飾符是本章節的難點。事件修飾符很多，同學們不需要一下子都記住，只要學會如何使用它，在開發過程中如果有所遺忘，可以通過翻看文檔來使用。
2. 慕課解釋
可以用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。 — 官方定義
使用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。
3. 基本使用
3.1 監聽點擊事件，并在觸發時運行一些 JavaScript 代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>商品數量 {{count}}</div>
<button v-on:click="count = count + 1"> 加一個 </button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
count: 0
},
})
</script>
</html>
代碼解釋：
在 html 第 3 行，我們使用 v-on 指令給 button 元素綁定來一個 click 事件，并在點擊的時候執行 count + 1 的操作。
3.2 通過 methods 實現事件函數綁定
在上面的例子中，我們把事件處理函數直接寫在模板中，然而許多事件處理的邏輯都很復雜，所以直接把JS代碼寫在 v-on 指令中有時并不可行，v-on 指令可以接收一個定義的方法來調用。示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>商品數量 {{count}}</div>
<button v-on:click="add"> 加一個 </button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
add() {
this.count = this.count + 1
}
}
})
</script>
</html>
代碼解釋：
在 html 第 3 行，我們使用 v-on 指令給 button 元素綁定來一個 click 事件，并在點擊的時候執行 add 方法。
在 JS 代碼第 9-11 行，我們定義了方法 add；觸發該方法時給 count + 1。
3.3 給事件傳遞參數
有時候我們需要在事件觸發的時候傳遞一些參數，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>商品數量 {{count}}</div>
<button v-on:click="setCount(10)"> 設置為 10 個 </button>
<button v-on:click="setCount(0)"> 設置為 0 個 </button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
setCount(count, event) {
this.count = count
}
}
})
</script>
</html>
代碼解釋：
在 html 第 3 行，我們使用 v-on 指令給 button 元素綁定了一個 click 事件，并在點擊的時候執行 add 方法。
在 JS 代碼第 9-11 行，我們定義了方法 add；觸發該方法時給 count + 1。
3.4 獲取原生 DOM 事件
有時我們需要在內聯語句處理器中訪問原始的 DOM 事件?？梢杂锰厥庾兞?$event 把它傳入方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>商品數量 {{count}}</div>
<button v-on:click="setCount(10, $event)"> 設置為 10 個 </button>
<button v-on:click="setCount(0, $event)"> 設置為 0 個 </button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
setCount(count, event) {
this.count = count
console.log(event)
}
}
})
</script>
</html>
代碼解釋：
在上述 JS 代碼第 9-12 行，我們定義了事件函數 setCount。 在按鈕點擊事件中，我們將 $event 對象傳遞給函數，因此，在函數 setCount 中可以訪問到原生事件對象。
4. 事件修飾符
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。實現方法就是在事件名稱后面以后綴的形式添加指定的修飾符。
知識擴展：
event.preventDefault() 用來取消事件的默認動作。
event.stopPropagation() 用來阻止事件冒泡到父元素，阻止任何父事件處理程序被執行。
Vue 提供了以下事件修飾符：
- .stop: 阻止單擊事件繼續傳播；
- .prevent: 只有修飾符，提交事件不再重載頁面；
- .capture: 添加事件監聽器時使用事件捕獲模式，即元素自身觸發的事件先在自身處理，然后交由內部元素進行處理；
- .self: 只有在event.target是當前元素自身時觸發處理函數，即事件不是從內部元素觸發的；
- .once: 點擊事件將只觸發一次;
- .passive: 滾動事件會立即觸發，不會等待其他串聯事件。即prevent會失效。
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理，然后才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>
接下來，我們用一個完整的示例來看下這些修飾符的使用方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.container{
height: 400px;
overflow-x: auto;
flex: 1;
}
.container div{
height: 20px;
}
</style>
<body>
<div id="app">
<!-- stop 案例 -->
<div @click="clickTargetContainer">
<button @click.stop="clickTargetA">點我 stop 案例</button>
<button @click="clickTargetA">點我 無 stop 修飾</button>
</div>
<!-- submit.prevent 案例 -->
<form method="get" action="/" @submit.prevent="submit">
<button type="submit">點我提交表單</button>
</form>
<form method="get" action="https://www.baidu.com" @submit="submit">
<button type="submit">點我提交表單</button>
</form>
<!-- capture 案例 -->
<div v-on:click.capture="capture">
<button @click.stop="clickTargetA">點我 capture 案例</button>
</div>
<!-- self 案例 -->
<div @click.self="clickTargetContainer" style="padding: 20px;border: 1px solid #cccccc;">
<button @click="clickTargetA">點我 self 案例</button>
</div>
<!-- once 案例 -->
<div>
<button @click.once="clickTargetA">點我 once 案例</button>
</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
methods: {
clickTargetContainer() {
alert('父級容器點擊事件觸發')
},
clickTargetA() {
alert('按鈕標簽點擊事件觸發')
},
submit() {
alert('提交表單了')
},
capture() {
alert('雖然你點擊的是內部元素，但是我先觸發！')
}
}
})
</script>
</html>
代碼解釋：
代碼第 4-7 行，stop 案例中，當我們給按鈕 click 事件添加 .stop 修飾符之后，點擊按鈕，事件不會向上傳遞。
代碼第 10-16 行，submit.prevent 案例中，當給 submit 事件添加 .prevent 修飾符之后，提交事件不再重載頁面。
代碼第 19-21 行，capture 案例中，我們給父容器添加了 capture 事件，當點擊按鈕的時候，會先觸發 capture 中的事件函數，然后再觸發按鈕綁定的點擊事件。
代碼第 24-26 行，self 案例中，我們給父容器的點擊事件添加了 .self 的修飾符，所以只有點擊父容器的時候才會觸發該方法，當點擊按鈕的時候并不會觸發父容器綁定的事件。
代碼第 29-31 行，once 案例中，我們給按鈕的點擊事件添加了 .once 的修飾符，所以只有首次點擊按鈕的時候會觸發事件函數，再次點擊之后將不會觸發事件函數。
5. 按鍵修飾符
在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵。Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：
<!-- 只有在 `key` 是 `Enter` 時調用 `login()` -->
<input v-on:keyup.enter="login">
<!-- 也可以使用 keyCode -->
<input v-on:keyup.13="login">
為了在必要的情況下支持舊瀏覽器，Vue 提供了絕大多數常用的按鍵碼的別名：
- .enter: 回車鍵；
- .tab: TAB鍵；
- .delete: 刪除和退格鍵；
- .esc: 只有在event.終止鍵；
- .space: 刪除鍵；
- .up: 上方向鍵：
- .down: 下方向鍵：
- .left: 左方向鍵：
- .right: 右方向鍵：
6. 系統修飾鍵
可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。
- .ctrl:
- .alt:
- .shift:
- .meta:
注意：在 Mac 系統鍵盤上，meta 對應 command 鍵 (?)。在 Windows 系統鍵盤 meta 對應 Windows 徽標鍵 (?)。在 Sun 操作系統鍵盤上，meta 對應實心寶石鍵 (◆)。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機器的鍵盤、以及其后繼產品，比如 Knight 鍵盤、space-cadet 鍵盤，meta 被標記為“META”。在 Symbolics 鍵盤上，meta 被標記為“META”或者“Meta”。
例如：
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
Vue提供了.exact修飾符，實現單獨的系統按鍵的事件。
例如：
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>
7. 小結
本節，我們帶大家學習了事件處理。主要知識點有以下幾點：
- 如何定義事件函數，如何給事件函數傳遞參數；
- 通過特殊參數 $event 獲取原生 DOM 事件；
- 事件修飾符的使用；
- 按鍵修飾符的使用；
- 系統修飾鍵的使用。
2025 imooc.com All Rights Reserved |