Vue.jsでイベントを設定する時にどんなイベントが使えるのか気になったので主なイベントのまとめ。
Vueのイベント
@イベント名="メソッド名"
v-onディレクティブ（省略形は@）でイベントを指定して、対象のメソッドを実行する。
イベントの種類
イベントを大きな分類で捉えるとわかりやすい。主要なイベントは大きく５つ。
- mouse： マウス操作に伴うイベント
- keyboard: キーボード操作に関するイベント
- form: フォームに関するイベント
- Touch: タッチ操作に関するイベント（スマホ・タブレットメイン）
1. mouse： マウス操作に伴うイベント
イベントの中でも一番といっていいほどよく使う。マウスイベントは大きく、３つの処理に分けられる。
- クリックイベント
- マウスイベント
- ドラッグイベント
| イベント名 | 内容 |
|---|---|
| click | クリックイベント。よく使う |
| dbclick | ダブルクリック |
| mousedown | ボタンを押した時 |
| mouseup | ボタンが離れた時 |
| mousemove | ボタンが動いている時（マウスが少し動くたびに検出） |
| mouseout | マウスが対象の外に出た時 |
| dragstart | ドラッグの開始 |
| drag | ドラッグ中 |
| dragenter | ドラッグ中に対象要素に入った時 |
| dragleave | ドラッグ中に対象要素から出た時 |
| dragover | 要素の上でドラッグしている時 |
| drop | ドラッグ中のボタンを離した時 |
| dragend | ドラッグ処理が終了した時 |
clickイベントは、mousedownとmouseupの組み合わせで作られている。
2. keyboard: キーボード操作に関するイベント
| イベント名 | 内容 |
|---|---|
| keydown | キーボードをクリックした時 |
| keypress | keydown処理の後に発火する |
| keyup | キーボードのクリックを離した時 |
3. form: フォームに関するイベント
| イベント名 | 内容 |
|---|---|
| select | テキストフィールドを選択した時（inputとtext areaも含む） |
| change | input, select, textarea要素において、ユーザーによる要素の値の変更が確定した時 |
| submit | 送信ボタンがクリックされた時 |
| reset | フォームがリセットされた時 |
| focus | フォーカスした時（対象要素のみ） |
| blur | フォーカスを外した時（対象要素のみ） |
| focusin | フォーカスした時（子要素でも発火） |
| focusout | フォーカスを外した時（子要素でも発火） |
selectとfocusの違いは、selectはユーザー自身が選択するのに対して、focusは自動で入力状態になる。
forcsの反対のblurは「ぼかし」という意味。focusとblurの使い方詳細はこちら。
focusとfocusin、blurとfocusoutの違いは、対象要素のみで発火するか、それとも子要素でイベントが発生した場合も発火するかの差。
バブリング
focusinやfocusoutのように、子要素でイベントが発火した時に、親のイベントも同時に発火することをバブリングという。
Vue.jsの場合、バブリング（親へのイベントの伝搬）を止めるメソッドとして、.stop修飾子が用意されている。
4. Touch: タッチ操作に関するイベント（スマホ・タブレットメイン）
マウス操作のスマホやタブレットバージョン。指を置いた時の操作で発動するイベント。
| イベント名 | 内容 |
|---|---|
| touchstart | 指が置かれた時 |
| touchend | 指が離れた時 |
| touchmove | 指が触れたまま動いている時 |
| touchenter | 指をなぞって対象要素触れた時 |
| touchleave | 指をなぞって対象要素から外れた時 |
| touchchancel | 指がタッチデバイスの枠から外れた時（操作ミスなど） |
参考リンク
イベントの種類はかなり多いので、もっと詳しく知りたい場合は下記ご参照。