Vue.jsのイベントハンドラ修飾子

## イベント修飾子
イベントを処理するにあたり、よく利用する動作を指定することができる。
個々の修飾子は、連結可能で、ハンドラを指定しなくても利用できる。
連結した場合、順序によって動作が変わるため、注意する。

```html
<button @click.stop.prevent="handlerName">Click</button>
<button @click.stop>Click</button>
```

[本家](https://jp.vuejs.org/v2/guide/events.html#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E4%BF%AE%E9%A3%BE%E5%AD%90)

#### .stop
親要素へのイベントの伝播を行わない。
== `stopPropagation`を実行する。

```html
<button @click.stop="handlerName">Click</button>
```

#### .prevent
既定のアクション（form内のbuttonのsubmitなど）を実行しない。
== `preventDefault`を実行する。


```html
<button @click.prevent="handlerName">Click</button>
```

#### .capture
子要素で発生したイベントを、発生対象の要素より先に処理する（キャプチャフェーズ[^1]でイベントを処理する）。
== `addEventListener`の`capture`オプションを`true`にする。

```html
<button @click.capture="handlerName">Click</button>
```
[^1]: [こちら](ttps://www.w3.org/TR/DOM-Level-3-Events/)を参照

#### .self
自身がイベント発生対象（`event.target`）の場合のみ、処理を実行する。
== 子要素でイベントが発生した場合、バブリングフェーズでイベントを処理しない。

```html
<button @click.self="handlerName">Click</button>
```

#### .once
一度だけイベントを発火する。
== `addEventListener`の`once`オプションを`true`にする。

```html
<button @click.once="handlerName">Click</button>
```

#### .passive
イベントの既定のアクションがハンドラの処理を待たずに実行される。[^2]
== `addEventListener`の`passive`オプションを`true`にする。
`.prevent`と共に使用すると、`.prevent`は無視されるため、指定しないこと。

```html
<button @click.passive="handlerName">Click</button>
```

[^2]: 使い所や各ブラウザでの仕様などは[こちら](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners)が詳しい

## キー修飾子
特定のキーのイベントの場合のみ、イベントを発火したい場合に利用する。
`.`で繋げることで、OR条件を指定することもできる。

```html
// enterキー押下
<input @keyup.enter="handlerName">
// ↓キー押下 （エイリアスで指定）
<input @keyup.down="handlerName">
// ↓キー押下 （KeyboardEvent.keyのキーで指定）
<input @keyup.page-down="handlerName">
// enterキー、escキー、↑キー、または、↓キー押下
<input @keyup.enter.esc.up.down="handlerName">
```

[本家](https://jp.vuejs.org/v2/guide/events.html#%E3%82%AD%E3%83%BC%E4%BF%AE%E9%A3%BE%E5%AD%90)

#### キーコードによる指定
`keyCode`属性によってキーを指定することもできる。

```html
<input @keyup.13="handlerName">
```

キーコードによる指定は、ブラウザ間の仕様の違いなどから、非推奨とされている。
その代わりに、Vueが指定しているエイリアスを利用することが推奨されている。
エイリアス一覧は[本家](https://jp.vuejs.org/v2/guide/events.html#%E3%82%AD%E3%83%BC%E4%BF%AE%E9%A3%BE%E5%AD%90)を参照。

#### カスタムキー修飾子のエイリアス
用途に応じて、特定のキーコードにカスタム修飾子のエイリアスを指定することができる。

```js
Vue.config.keyCodes.f1 = 112
```

## システム修飾子
特定のキーが押下されているときのみ、イベントを発火したい場合に利用する。[^3]
キー修飾子と違い、`.`で繋げた場合、AND条件となることに注意する。
- `.ctrl`
- `.alt`
- `.shift`
- `.meta`[^4]

```html
// ctrlキーを押しながらenterキーを押下
<input @keyup.ctrl.enter="handlerName">
// shiftキーとaltキーを押しながらクリック
<button @click.shift.alt="handlerName">Click</button>
```

[^3]: keyupイベントでシステム修飾子だけを指定した場合、指定したキーのみを離してもイベントは発火しない<br/>指定したキーを押しながらシステム修飾子以外のキーを離した場合に発火する<br/>システム修飾子のみでイベントを発生させたい場合はキー修飾子のキーコードによって指定する

[^4]: macの場合はcommandキー、windowsの場合はウィンドウキー

#### .exact
システム修飾子の厳密な組み合わせを指定する。
また、システム修飾子なしで`.exact`のみを指定した場合、全てのシステム修飾子が押下されていない場合のみイベントを発火する。

```html
// shiftキーを押しながらクリック（他のシステム修飾子が押されていても良い）
<button @click.shift="handlerName">
// shiftキーのみが押下されている状態でクリック
<button @click.shift.exact="handlerName">Click</button>
// shiftキーとaltキーのみが押下されている状態でクリック
<button @click.shift.alt.exact="handlerName">Click</button>
// システム修飾子が何も押下されていない状態でクリック
<button @click.exact="handlerName">Click</button>
```

#### マウスの修飾子
マウスのボタンによるイベントの発火を、特定のボタンのみに制限する。
- `.left`
- `.right`
- `.middle`

## おまけ：ハンドラへの引数の渡し方
#### イベントを取得する
```html
<button @click="handler">Click</button>
```
```js
methods: {
  handler(event) {
    console.log(event)
  }
}
```

#### ハンドラに引数を渡す
```html
<button @click="handler(param)">Click</button>
```
```js
methods: {
  handler(paramName) {
    console.log(paramName)
  }
}
```

#### イベントと引数を両方渡す
```html
<button @click="handler($event, param)">Click</button>
```
```js
methods: {
  handler($event, paramName) {
    console.log($event)
    console.log(paramName)
  }
}
```