## 監聽事件 可以用 `v-on` 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。 示例： ``` html <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> ``` ``` js var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) ``` 結果： {% raw %} <div id="example-1" class="demo"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> <script> var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) </script> {% endraw %} ## 事件處理方法 然而許多事件處理邏輯會更為復雜，所以直接把 JavaScript 代碼寫在 `v-on` 指令中是不可行的。因此 `v-on` 還可以接收一個需要調用的方法名稱。 示例： ``` html <div id="example-2"> <!-- `greet` 是在下面定義的方法名 --> <button v-on:click="greet">Greet</button> </div> ``` ``` js var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // 在 `methods` 對象中定義方法 methods: { greet: function (event) { // `this` 在方法里指向當前 Vue 實例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接調用方法 example2.greet() // => 'Hello Vue.js!' ``` 結果： {% raw %} <div id="example-2" class="demo"> <button v-on:click="greet">Greet</button> </div> <script> var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, methods: { greet: function (event) { alert('Hello ' + this.name + '!') if (event) { alert(event.target.tagName) } } } }) </script> {% endraw %} ## 內聯處理器中的方法 除了直接綁定到一個方法，也可以在內聯 JavaScript 語句中調用方法： ``` html <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> ``` ``` js new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } }) ``` 結果： {% raw %} <div id="example-3" class="demo"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> <script> new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } }) </script> {% endraw %} 有時也需要在內聯語句處理器中訪問原始的 DOM 事件。可以用特殊變量 `$event` 把它傳入方法： ``` html <button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button> ``` ``` js // ... methods: { warn: function (message, event) { // 現在我們可以訪問原生事件對象 if (event) event.preventDefault() alert(message) } } ``` ## 事件修飾符 在事件處理程序中調用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常見的需求。盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。 為了解決這個問題，Vue.js 為 `v-on` 提供了**事件修飾符**。之前提過，修飾符是由點開頭的指令后綴來表示的。 - `.stop` - `.prevent` - `.capture` - `.self` - `.once` - `.passive` ``` html <!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件監聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發的事件先在此處理，然后才交由內部元素進行處理 --> <div v-on:click.capture="doThis">...</div> <!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div> ``` <p class="tip">使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 `v-on:click.prevent.self` 會阻止**所有的點擊**，而 `v-on:click.self.prevent` 只會阻止對元素自身的點擊。</p> > 2.1.4 新增 ``` html <!-- 點擊事件將只會觸發一次 --> <a v-on:click.once="doThis"></a> ``` 不像其它只能對原生的 DOM 事件起作用的修飾符，`.once` 修飾符還能被用到自定義的[組件事件](components-custom-events.html)上。如果你還沒有閱讀關于組件的文檔，現在大可不必擔心。 > 2.3.0 新增 Vue 還對應 [`addEventListener` 中的 `passive` 選項](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters)提供了 `.passive` 修飾符。 ``` html <!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 --> <!-- 而不會等待 `onScroll` 完成 --> <!-- 這其中包含 `event.preventDefault()` 的情況 --> <div v-on:scroll.passive="onScroll">...</div> ``` 這個 `.passive` 修飾符尤其能夠提升移動端的性能。 <p class="tip">不要把 `.passive` 和 `.prevent` 一起使用，因為 `.prevent` 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，`.passive` 會告訴瀏覽器你*不*想阻止事件的默認行為。</p> ## 按鍵修飾符 在監聽鍵盤事件時，我們經常需要檢查常見的鍵值。Vue 允許為 `v-on` 在監聽鍵盤事件時添加按鍵修飾符： ``` html <!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` --> <input v-on:keyup.13="submit"> ``` 記住所有的 `keyCode` 比較困難，所以 Vue 為最常用的按鍵提供了別名： ``` html <!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 縮寫語法 --> <input @keyup.enter="submit"> ``` 全部的按鍵別名： - `.enter` - `.tab` - `.delete` (捕獲“刪除”和“退格”鍵) - `.esc` - `.space` - `.up` - `.down` - `.left` - `.right` 可以通過全局 `config.keyCodes` 對象[自定義按鍵修飾符別名](../api/#keyCodes)： ``` js // 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 ``` ### 自動匹配按鍵修飾符 > 2.5.0 新增 你也可直接將 [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) 暴露的任意有效按鍵名轉換為 kebab-case 來作為修飾符： ```html <input @keyup.page-down="onPageDown"> ``` 在上面的例子中，處理函數僅在 `$event.key === 'PageDown'` 時被調用。 <p class="tip">有一些按鍵 (`.esc` 以及所有的方向鍵) 在 IE9 中有不同的 `key` 值, 如果你想支持 IE9，它們的內置別名應該是首選。</p> ## 系統修飾鍵 > 2.1.0 新增 可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。 - `.ctrl` - `.alt` - `.shift` - `.meta` > 注意：在 Mac 系統鍵盤上，meta 對應 command 鍵 (?)。在 Windows 系統鍵盤 meta 對應 Windows 徽標鍵 (?)。在 Sun 操作系統鍵盤上，meta 對應實心寶石鍵 (◆)。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機器的鍵盤、以及其后繼產品，比如 Knight 鍵盤、space-cadet 鍵盤，meta 被標記為“META”。在 Symbolics 鍵盤上，meta 被標記為“META”或者“Meta”。 例如： ```html <!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div> ``` <p class="tip">請注意修飾鍵與常規按鍵不同，在和 `keyup` 事件一起用時，事件觸發時修飾鍵必須處于按下狀態。換句話說，只有在按住 `ctrl` 的情況下釋放其它按鍵，才能觸發 `keyup.ctrl`。而單單釋放 `ctrl` 也不會觸發事件。如果你想要這樣的行為，請為 `ctrl` 換用 `keyCode`：`keyup.17`。</p> ### `.exact` 修飾符 > 2.5.0 新增 `.exact` 修飾符允許你控制由精確的系統修飾符組合觸發的事件。 ``` html <!-- 即使 Alt 或 Shift 被一同按下時也會觸發 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的時候才觸發 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 沒有任何系統修飾符被按下的時候才觸發 --> <button @click.exact="onClick">A</button> ``` ### 鼠標按鈕修飾符 > 2.2.0 新增 - `.left` - `.right` - `.middle` 這些修飾符會限制處理函數僅響應特定的鼠標按鈕。 ## 為什么在 HTML 中監聽事件? 你可能注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但不必擔心，因為所有的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會導致任何維護上的困難。實際上，使用 `v-on` 有幾個好處： 1. 掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應的方法。 2. 因為你無須在 JavaScript 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測試。 3. 當一個 ViewModel 被銷毀時，所有的事件處理器都會自動被刪除。你無須擔心如何清理它們。