search
LoginSignup
9

More than 1 year has passed since last update.

posted at

【Vue】使えるイベント一覧。v-onディレクティブで指定できる主要イベント(JavaScriptと同じ)

Vue.jsでイベントを設定する時にどんなイベントが使えるのか気になったので主なイベントのまとめ。

Vueのイベント

@イベント名="メソッド名" 

v-onディレクティブ(省略形は@)でイベントを指定して、対象のメソッドを実行する。

イベントの種類

イベントを大きな分類で捉えるとわかりやすい。主要なイベントは大きく5つ。

  1. mouse: マウス操作に伴うイベント
  2. keyboard: キーボード操作に関するイベント
  3. form: フォームに関するイベント
  4. Touch: タッチ操作に関するイベント(スマホ・タブレットメイン)

1. mouse: マウス操作に伴うイベント

イベントの中でも一番といっていいほどよく使う。マウスイベントは大きく、3つの処理に分けられる。

  1. クリックイベント
  2. マウスイベント
  3. ドラッグイベント
イベント名 内容
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修飾子が用意されている。

stop修飾子の使い方。バブリング実例


4. Touch: タッチ操作に関するイベント(スマホ・タブレットメイン)

マウス操作のスマホやタブレットバージョン。指を置いた時の操作で発動するイベント。

イベント名 内容
touchstart 指が置かれた時
touchend 指が離れた時
touchmove 指が触れたまま動いている時
touchenter 指をなぞって対象要素触れた時
touchleave 指をなぞって対象要素から外れた時
touchchancel 指がタッチデバイスの枠から外れた時(操作ミスなど)


参考リンク

イベントの種類はかなり多いので、もっと詳しく知りたい場合は下記ご参照。

DOMイベント一覧

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
9