---
# System prepended metadata

title: 【Vue】事件處理
tags: [Vue]

---

###### tags: `Vue`

# 【Vue】事件處理

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

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

<button @click="handler"></button>
```
* 直接寫在雙引號內的 javascript 程式碼稱為 inline handler
* 方法稱為 method handler
* 也可以在 inline handler 中呼叫方法
```html=
<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>
```
```js=
function say(message) {
  alert(message)
}
```
## 在 inline handler 中使用 event 變數
有時候我們會想使用原生的 DOM 事件，可以利用 「$event 變數」或是用「箭頭函式」傳遞
```js=
<!-- 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)
```js=
<!-- 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)

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

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

```js=
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 命名法來呼叫

```html=
<input @keyup.page-down="onPageDown" />
```
### 系統按鍵修飾符
* `.ctrl`
* `.alt`
* `.shift`
* `.meta`
:::info
meta 在 Mac 中是 command 按鍵(⌘)，在 windows 中是 windows 按鍵(⊞)，其他不同的鍵盤可能也會有不同的樣式
:::
* ex:
```js=
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

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

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

```js=
<input @keyup.ctrl="clear" />
```
* `.exact` 修飾符
    只有按指定的按鍵才能觸發事件，多按會觸發不了
```js=
<!-- 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`
