Vue.js Event Handling 事件處理

事件處理在網頁上的應用非常廣，無論是我們滑鼠移動、按鍵輸入、或是在網頁上點擊某一個區塊，都可以因為這個互動，讓網頁做些事。但在程式裡，其實就是瀏覽者做了某些事(事件監聽)
，然後我們要給出什麼反應(事件觸發)，例如，點一下按鍵，我們要程式去做某些事，例如呼叫某支函式要它做些什麼，或者，我們希望能取到瀏覽者所點擊到的值。

Codepen : Vue.js Event Handling 事件處理

這裡分三個部分來示範在事件處理時， Vue 會用到的一些指令

1. 監聽事件的綁定

我們可以使用 vue 的@click="觸發事件的方法"來監聽與綁定事件：
第一個按鈕test1: 一般的觸發事件，直接取到我們點擊按鈕的值。
第二個按鈕test2: 帶參數的觸發事件，可直接取到我們給的參數。
第三個按鈕test3: 點擊的事件，可加上 vue 的特殊變數$event來監聽，但事實上如果我們沒有加上$event此參數，vue 也會自動幫我們抓取event監聽的對象。
第四個按鈕test4: 希望可以帶參數，同時又可取到監聽對象的值。

<button @click="test1">test1</button>
<!-- 綁定自己的資料 -->
<button @click="test2('Hello')">test2</button>

<!-- 可利用vue的特殊變數$event 來拿到button的值 -->
<!-- 等同這樣寫： <button @clock="test3">test3</button> -->
<button @click="test3($event)">test3</button>

<!-- 想傳自己給的變數，同時想取得點取 event 的值 -->
<button @click="test4(42,$event )">test4</button>

在實例的 methods 準備好觸發的方法：

methods: {
        test1() {
          alert('test1')
        },
        test2(msg) {
          alert(msg)
        },
        test3(event) {
          // 透過 event裡的target與innerHTML去取得按鈕的內容
          alert(event.target.innerHTML)
        },
        test4(nbr, event) {
          alert(nbr + '---' + event.target.innerHTML)

        },
}

事件修飾符

阻止冒泡行為：@click.stop

在原生的 Javascript 如果要防止冒泡行為或預設行為，需要在 JavaScript 裡的監聽對象加上stopPropagation()
例如有兩個大小疊在一起、可點擊的 box，如果想點擊小 box，也會同時觸發到在它底部的大 box ，這即是「冒泡事件」。
在 vue 裡，只要在希望被點取的那個 div(這裡指小 box) 的@click="" 加上.stop，如@click.stop=""即可阻止冒泡事件，非常方便。

阻止事件默認行為： @click.prevent

如果有一個連結，我們想阻止事件的默認行為，也就是點擊後不想直接導向到連結網址去該怎麼做？在原生的 JavaScript 我們同樣需要使用event.preventDefault()來阻止 html 裡的預設行為，但是在 vue 裡，只要在 html 使用事件修飾符prevent就可以達到效果。

<!-- 防止(stop)事件冒泡 -->
<div class="box1" @click="test5">
  <div class="box2" @click.stop="test6"></div>
</div>
<!-- 阻止事件默認行為 -->
<a href="http://google.com" @click.prevent="test7">去google</a>

在實例的 methods 準備好觸發的方法：

methods:{
  test5() {
    alert('out')
  },
  test6() {
    alert('inner')
  },
  test7(event) {
    alert('點到了')
  },
}

按鍵修飾符

通常我們在 input 填好資料時，需要按一個送出的按鈕來送出，但其實用 enter 鍵會直覺很多，使用 Vue 的按鍵修飾符@keyup來指定監聽的方式是鍵盤輸入，如果想指定某一個鍵，需要知道按下的那個鍵的鍵碼，才能指定，如果不知道我們指定的鍵的鍵碼，可以用alert(event.keyCode)來查詢。

原生的寫法可用條件式判斷if (event.keyCode === 13)(這裡的 13 是 enter 鍵的鍵值)，確定點到的是指定的鍵。在 Vue 可直接將鍵碼加到 keyup 後面 –> keyup.13 或是直接寫鍵名(只限定特殊鍵)keyup.enter 也可以達到一樣的效果。

<!-- 想使用enter鍵輸入 -->
<input type="text" @keyup.13="test8" />
<input type="text" @keyup.enter="test8" />

在實例的 methods 準備好觸發的方法：

methods:{
  test8($event) {
    alert(event.target.value + '--' + event.keyCode)
  }
}

在 Vue 裡還有許多其他的事件修飾符：stop / prevent / capture / self / once / passive。用法可以參閱官方文件事件處理 — Vue.js 來了解各項用法。

Vue 把以往需要在 JavaScript 裡寫的程式碼，全部改成在 HTML 就可處理的指令，的確方便許多，但也要知道 Javascript 的原生寫法，才不會改天需要寫原生寫不出來，這就是 Vue 的方便會費人 JS 武功的原因了。

自定義全域按鍵修飾符

有時需要操控某個按鍵，來達到一些效果，就可以指定某個按鍵為替代
Vue.config.keyCode.f2 = 113表示以按鍵 F2 來取代原本 113(enter 鍵)keyCode 所做的事。
在標籤上就可這樣寫@keyup.f2="addItem"