###### tags: `Vue`

# 【Vue】事件處理

## 事件監聽
* 使用`v-on`來監聽事件，也可以寫成`@`
* handler 可以是 **javascript 程式碼** 或是**方法名稱**

<button v-on:click="handler"></button>

<button @click="handler"></button>

* 直接寫在雙引號內的 javascript 程式碼稱為 inline handler
* 方法稱為 method handler
* 也可以在 inline handler 中呼叫方法

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

function say(message) {
  alert(message)
}

## 在 inline handler 中使用 event 變數
有時候我們會想使用原生的 DOM 事件，可以利用 「$event 變數」或是用「箭頭函式」傳遞

<!-- using $event special variable -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- using inline arrow function -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

## 事件修飾符
一般在 js 中很常使用 `event.preventDefault()` 或是 `event.stopPropagation()` 之類的事件處理方法，Vue 提供一些修飾符讓你可以直接在樣板中使用

1. `.stop` -> [`stopPropagation()`](https://ithelp.ithome.com.tw/articles/10198999)
2. `.prevent` -> `preventDefault()`
3. `.self` -> 只有自己觸發的時候在會叫調用
4. `.capture` -> 不管觸發事件的 DOM 元素是誰，使用 .capture 修飾符的事件會優先觸發。
5. `.once` -> 只會觸發一次
6. `.passive` -> 無視 `event.preventDefault()` 的功能 (通常用在 touch event 上)

* 註: [事件冒泡](https://codepen.io/intHuang/pen/XWxMREX?editors=1011)

<!-- modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>

<!-- just the modifier -->
<form @submit.prevent></form>

:::warning
修飾符的順序是有差別的，舉例來說 `@click.prevent.self` 會作用在你按的元素和他的子元素，但是 `@click.self.prevent` 只會作用在你按的元素上
:::

### JS原生方法 [addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options)

const btn = document.querySelector('button');

btn.addEventListener('click', function(){
    alert("you click the button");
})

addEventListener(type, listener)
addEventListener(type, listener, options)

* `type`: 事件種類 (ex: click)
* `listener`: 可以是 null、handleEvent() 方法或是一個 JS 函式
* `options`:
* `capture`
* `once`
* `passive`

:::warning
`.passive` 修飾符和 `.prevent` 修飾符不要一起使用
:::

## 鍵盤按鍵修飾符
* `.enter`
* `.tab`
* `.delete ("Delete" 和 "Backspace" 都會觸發)`
* `.esc`
* `.space`
* `.up`
* `.down`
* `.left`
* `.right`

[原生鍵盤事件](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) 可以用 kebab-case 命名法來呼叫

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

### 系統按鍵修飾符
* `.ctrl`
* `.alt`
* `.shift`
* `.meta`
:::info
meta 在 Mac 中是 command 按鍵(⌘)，在 windows 中是 windows 按鍵(⊞)，其他不同的鍵盤可能也會有不同的樣式
:::
* ex:

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

* keyup 事件中的系統按鍵修飾符比較特別，以下例子來說只有在你按住
ctrl 並放開其他按鍵時才會觸發，單獨釋放 ctrl 並不會觸發事件

<input @keyup.ctrl="clear" />

* `.exact` 修飾符
只有按指定的按鍵才能觸發事件，多按會觸發不了

<!-- this will fire even if Alt or Shift is also pressed -->
<button @click.ctrl="onClick">A</button>

<!-- this will only fire when Ctrl and no other keys are pressed -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- this will only fire when no system modifiers are pressed -->
<button @click.exact="onClick">A</button>

## 滑鼠按件修飾符
* `.left`
* `.right`
* `.middle`