事(shì)件處理(lǐ)

監聽事(shì)件 ​

我們可以使用(yòng) v-on 指令 (簡寫爲 @) 來(lái)監聽 DOM 事(shì)件，并在事(shì)件觸發時(shí)執行對(duì)應的 JavaScript。用(yòng)法：v-on:click="handler" 或 @click="handler"。

事(shì)件處理(lǐ)器 (handler) 的值可以是：

内聯事(shì)件處理(lǐ)器：事(shì)件被觸發時(shí)執行的内聯 JavaScript 語句 (與 onclick 類似)。

方法事(shì)件處理(lǐ)器：一個指向組件上(shàng)定義的方法的屬性名或是路徑。

内聯事(shì)件處理(lǐ)器 ​

内聯事(shì)件處理(lǐ)器通常用(yòng)于簡單場景，例如：

js

data() {

return {

count: 0

}

}

template

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

<p>Count is: {{ count }}</p>

方法事(shì)件處理(lǐ)器 ​

随着事(shì)件處理(lǐ)器的邏輯變得愈發複雜(zá)，内聯代碼方式變得不夠靈活。因此 v-on 也(yě)可以接受一個方法名或對(duì)某個方法的調用(yòng)。

舉例來(lái)說：

js

data() {

return {

name: 'Vue.js'

}

},

methods: {

greet(event) {

// 方法中的 `this` 指向當前活躍的組件實例

alert(`Hello ${this.name}!`)

// `event` 是 DOM 原生事(shì)件

if (event) {

alert(event.target.tagName)

}

}

}

template

<!-- `greet` 是上(shàng)面定義過的方法名 -->

<button @click="greet">Greet</button>

方法事(shì)件處理(lǐ)器會(huì)自(zì)動接收原生 DOM 事(shì)件并觸發執行。在上(shàng)面的例子中，我們能(néng)夠通過被觸發事(shì)件的 event.target.tagName 訪問到(dào)該 DOM 元素。

你(nǐ)也(yě)可以看(kàn)看(kàn)爲事(shì)件處理(lǐ)器标注類型這(zhè)一章了(le)解更多。

方法與内聯事(shì)件判斷 ​

模闆編譯器會(huì)通過檢查 v-on 的值是否是合法的 JavaScript 标識符或屬性訪問路徑來(lái)斷定是何種形式的事(shì)件處理(lǐ)器。舉例來(lái)說，foo、foo.bar 和(hé) foo['bar'] 會(huì)被視(shì)爲方法事(shì)件處理(lǐ)器，而 foo() 和(hé) count++ 會(huì)被視(shì)爲内聯事(shì)件處理(lǐ)器。

在内聯處理(lǐ)器中調用(yòng)方法 ​

除了(le)直接綁定方法名，你(nǐ)還可以在内聯事(shì)件處理(lǐ)器中調用(yòng)方法。這(zhè)允許我們向方法傳入自(zì)定義參數以代替原生事(shì)件：

js

methods: {

say(message) {

alert(message)

}

}

template

<button @click="say('hello')">Say hello</button>

<button @click="say('bye')">Say bye</button>

在内聯事(shì)件處理(lǐ)器中訪問事(shì)件參數 ​

有時(shí)我們需要在内聯事(shì)件處理(lǐ)器中訪問原生 DOM 事(shì)件。你(nǐ)可以向該處理(lǐ)器方法傳入一個特殊的 $event 變量，或者使用(yòng)内聯箭頭函數：

template

<!-- 使用(yòng)特殊的 $event 變量 -->

<button @click="warn('Form cannot be submitted yet.', $event)">

Submit

</button>

<!-- 使用(yòng)内聯箭頭函數 -->

<button @click="(event) => warn('Form cannot be submitted yet.', event)">

Submit

</button>

js

methods: {

warn(message, event) {

// 這(zhè)裏可以訪問 DOM 原生事(shì)件

if (event) {

event.preventDefault()

}

alert(message)

}

}

事(shì)件修飾符 ​

在處理(lǐ)事(shì)件時(shí)調用(yòng) event.preventDefault() 或 event.stopPropagation() 是很(hěn)常見的。盡管我們可以直接在方法内調用(yòng)，但(dàn)如果方法能(néng)更專注于數據邏輯而不用(yòng)去處理(lǐ) DOM 事(shì)件的細節會(huì)更好(hǎo)。

爲解決這(zhè)一問題，Vue 爲 v-on 提供了(le)事(shì)件修飾符。修飾符是用(yòng) . 表示的指令後綴，包含以下(xià)這(zhè)些(xiē)：

.stop

.prevent

.self

.capture

.once

.passive

template

<!-- 單擊事(shì)件将停止傳遞 -->

<a @click.stop="doThis"></a>

<!-- 提交事(shì)件将不再重新加載頁面 -->

<form @submit.prevent="onSubmit"></form>

<!-- 修飾語可以使用(yòng)鏈式書寫 -->

<a @click.stop.prevent="doThat"></a>

<!-- 也(yě)可以隻有修飾符 -->

<form @submit.prevent></form>

<!-- 僅當 event.target 是元素本身時(shí)才會(huì)觸發事(shì)件處理(lǐ)器 -->

<!-- 例如：事(shì)件處理(lǐ)器不來(lái)自(zì)子元素 -->

<div @click.self="doThat">...</div>

TIP

使用(yòng)修飾符時(shí)需要注意調用(yòng)順序，因爲相關代碼是以相同的順序生成的。因此使用(yòng) @click.prevent.self 會(huì)阻止元素及其子元素的所有點擊事(shì)件的默認行爲，而 @click.self.prevent 則隻會(huì)阻止對(duì)元素本身的點擊事(shì)件的默認行爲。

.capture、.once 和(hé) .passive 修飾符與原生 addEventListener 事(shì)件相對(duì)應：

template

<!-- 添加事(shì)件監聽器時(shí)，使用(yòng) `capture` 捕獲模式 -->

<!-- 例如：指向内部元素的事(shì)件，在被内部元素處理(lǐ)前，先被外(wài)部處理(lǐ) -->

<div @click.capture="doThis">...</div>

<!-- 點擊事(shì)件最多被觸發一次 -->

<a @click.once="doThis"></a>

<!-- 滾動事(shì)件的默認行爲 (scrolling) 将立即發生而非等待 `onScroll` 完成 -->

<!-- 以防其中包含 `event.preventDefault()` -->

<div @scroll.passive="onScroll">...</div>

.passive 修飾符一般用(yòng)于觸摸事(shì)件的監聽器，可以用(yòng)來(lái)改善移動端設備的滾屏性能(néng)。

TIP

請(qǐng)勿同時(shí)使用(yòng) .passive 和(hé) .prevent，因爲 .passive 已經向浏覽器表明(míng)了(le)你(nǐ)不想阻止事(shì)件的默認行爲。如果你(nǐ)這(zhè)麽做了(le)，則 .prevent 會(huì)被忽略，并且浏覽器會(huì)抛出警告。

按鍵修飾符 ​

在監聽鍵盤事(shì)件時(shí)，我們經常需要檢查特定的按鍵。Vue 允許在 v-on 或 @ 監聽按鍵事(shì)件時(shí)添加按鍵修飾符。

template

<!-- 僅在 `key` 爲 `Enter` 時(shí)調用(yòng) `submit` -->

<input @keyup.enter="submit" />

你(nǐ)可以直接使用(yòng) KeyboardEvent.key 暴露的按鍵名稱作(zuò)爲修飾符，但(dàn)需要轉爲 kebab-case 形式。

template

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

在上(shàng)面的例子中，僅會(huì)在 $event.key 爲 'PageDown' 時(shí)調用(yòng)事(shì)件處理(lǐ)。

按鍵别名 ​

Vue 爲一些(xiē)常用(yòng)的按鍵提供了(le)别名：

.enter

.tab

.delete (捕獲“Delete”和(hé)“Backspace”兩個按鍵)

.esc

.space

.up

.down

.left

.right

系統按鍵修飾符 ​

你(nǐ)可以使用(yòng)以下(xià)系統按鍵修飾符來(lái)觸發鼠标或鍵盤事(shì)件監聽器，隻有當按鍵被按下(xià)時(shí)才會(huì)觸發。

.ctrl

.alt

.shift

.meta

注意

在 Mac 鍵盤上(shàng)，meta 是 Command 鍵 (⌘)。在 Windows 鍵盤上(shàng)，meta 鍵是 Windows 鍵 (⊞)。在 Sun 微機系統鍵盤上(shàng)，meta 是鑽石鍵 (◆)。在某些(xiē)鍵盤上(shàng)，特别是 MIT 和(hé) Lisp 機器的鍵盤及其後代版本的鍵盤，如 Knight 鍵盤，space-cadet 鍵盤，meta 都被标記爲“META”。在 Symbolics 鍵盤上(shàng)，meta 也(yě)被标識爲“META”或“Meta”。

舉例來(lái)說：

template

<!-- Alt + Enter -->

<input @keyup.alt.enter="clear" />

<!-- Ctrl + 點擊 -->

<div @click.ctrl="doSomething">Do something</div>

TIP

請(qǐng)注意，系統按鍵修飾符和(hé)常規按鍵不同。與 keyup 事(shì)件一起使用(yòng)時(shí)，該按鍵必須在事(shì)件發出時(shí)處于按下(xià)狀态。換句話(huà)說，keyup.ctrl 隻會(huì)在你(nǐ)仍然按住 ctrl 但(dàn)松開(kāi)了(le)另一個鍵時(shí)被觸發。若你(nǐ)單獨松開(kāi) ctrl 鍵将不會(huì)觸發。

.exact 修飾符 ​

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

template

<!-- 當按下(xià) Ctrl 時(shí)，即使同時(shí)按下(xià) Alt 或 Shift 也(yě)會(huì)觸發 -->

<button @click.ctrl="onClick">A</button>

<!-- 僅當按下(xià) Ctrl 且未按任何其他(tā)鍵時(shí)才會(huì)觸發 -->

<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 僅當沒有按下(xià)任何系統按鍵時(shí)觸發 -->

<button @click.exact="onClick">A</button>

鼠标按鍵修飾符 ​

.left

.right

.middle

這(zhè)些(xiē)修飾符将處理(lǐ)程序限定爲由特定鼠标按鍵觸發的事(shì)件。