## 事件處理 ### 監聽事件 可以用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。 ~~~ <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> ~~~ ~~~ var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) ~~~ ### 事件處理方法 ~~~ <div id="example-2"> <!-- `greet` 是在下面定義的方法名 --> <button v-on:click="greet">Greet</button> </div> ~~~ ~~~ 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!' ~~~ 除了直接綁定到一個方法，也可以在內聯 JavaScript 語句中調用方法： ~~~ <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> ~~~ ~~~ new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } }) ~~~ 如何要拿到時間的event對象 ~~~ <button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button> ~~~ ~~~ // ... methods: { warn: function (message, event) { // 現在我們可以訪問原生事件對象 if (event) event.preventDefault() alert(message) } } ~~~ ### 時間修飾符 ~~~ .stop .prevent .capture .self .once .passive ~~~ ~~~ <!-- 阻止單擊事件繼續傳播 --> <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> ~~~ ### 按鍵修飾符 在監聽鍵盤事件時，我們經常需要檢查常見的鍵值。Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符： ~~~ <!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` --> <input v-on:keyup.13="submit"> ~~~ 記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名： ~~~ <!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 縮寫語法 --> <input @keyup.enter="submit"> ~~~ 全部的按鍵別名 ~~~ .enter .tab .delete (捕獲“刪除”和“退格”鍵) .esc .space .up .down .left .right ~~~ 可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名： ~~~ // 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 ~~~ ### 系統修飾鍵 ~~~ .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> ~~~ ### 課后習題 1.實現下面的需求,點擊父元素和子元素不重合的部分的時候打印“你點擊了父元素”，點擊子元素（id=child）的時候，按順序打印，“你點擊了父元素，你點擊了子元素” ~~~ <div id="parent" style="width:100px;height:100px;"> <div id="child" style="width:50px;height:50px;"></div> </div> ~~~