【Vue.js】イベントハンドリングをサンプルを作りながら理解する

※ 2020/04/13 drag, drop系を追記しました
※ 2020/07/22 formの内容を修正しました

はじめに

フロントエンド自体が初心者なので正直この辺りについては全然理解が追い付いてないです。

今回は簡単なサンプルを作りながら自分なり理解していこうと思います。

メソッドハンドラ

Vue.jsでは「v-on」ディレクティブを用いることで要素にイベントリスナをバインドします。

<button v-on:click="hoge">Click me!</button>

省略形として@を用いる場合もあります。

<button @click="hoge">Click me!</button>

イベント一覧

※すべてではないです 。

click, dblclick

クリック、ダブルクリック時に発火するイベントです。

See the Pen QJKKqL by b1san (@b1san1) on CodePen.

keyup, keydown

キーアップ、キーダウン時に発火するイベントです。

キー修飾子

キー修飾子を指定することで任意のキーのみでイベントを発火させることができます。

キーコードで指定も可能ですが、以下のように用意されているものもあります。

• enter
• tab
• delete
• esc
• space
• meta
• up
• down
• left
• right

See the Pen NERRwZ by b1san (@b1san1) on CodePen.

focus, blur

focusはフォーカスされたとき、blurはフォーカスが外れたときにイベントが発火します。

See the Pen vQXXrz by b1san (@b1san1) on CodePen.

change

フォーカスされてから外れるまでの間に値が変化している場合にイベントが発火します。

See the Pen VVKmMO by b1san (@b1san1) on CodePen.

mouseover, mouseout

mouseoverはマウスカーソルを当てたとき、mouseoutはマウスカーソルが外れたときにイベントが発火します。

See the Pen jQMMdW by b1san (@b1san1) on CodePen.

## mouseenter, mouseleave

mouseover, mouseoutと同じくマウスカーソルを当てたとき、外れたときにイベントが発火しますが、子要素にイベントを伝搬させないという違いがあります。

サンプルを動かしてもらうと両者のイベントの発火数の違いがわかると思います。

mouseover, mouseoutは、子要素であるpタグやdivタグ、さらにその子要素のpタグにカーソルを当てたり外した場合でも親側のイベントが発火しています。

一方、mouseenter, mouseleaveは、自身の要素のみにおいてイベントが発火しています。

See the Pen YRGpzd by b1san (@b1san1) on CodePen.

mouseup, mousedown

mousedownはマウスのボタンを押したとき、mouseupはマウスのボタンを離したときに発火するイベントです。

マウスのすべてのボタンに反応します。

キー修飾子

キーの場合と同じでイベント発火を任意のボタンに絞ることができます。

• left

• right

• middle

See the Pen aQmBWj by b1san (@b1san1) on CodePen.

scroll

スクロール時に発火するイベントです。

See the Pen wQzgLE by b1san (@b1san1) on CodePen.

submit

submitされたときに発火するイベントです。form内のinput要素でEnterキーを押してもイベントが発火します。

submitを使用する際は必ずprevent修飾子を指定するようにしてください。prevent修飾子については後述しますが、デフォルトのsubmitの動作を止める必要があります。

See the Pen zMKoaJ by b1san (@b1san1) on CodePen.

drag, dragstart, dragend

対象要素をドラッグ可能（draggable）にした場合に、ドラッグ開始（dragstart）、ドラッグ中（drag）、ドラッグ終了（dragend）に該当するイベントになります。

See the Pen drag by b1san (@b1san1) on CodePen.

dragenter, dragleave

こちらはドラッグされる側のイベントになります。ドラッグ中にカーソルが当たった時（dragenter）と外れたとき（dragleave）のイベントになります。サンプルの黒い要素に適当なファイルをドラッグしてみてください。

See the Pen enter,leave by b1san (@b1san1) on CodePen.

dragover, drop

こちらもドラッグされる側のイベントになります。dragoverは対象要素の中でドラッグしている間発火され続けます。dropは対象要素の中でドラッグをやめたときに発火されます。

サンプルでは対象要素にドラッグ＆ドロップされたファイル名の一覧を表示するようにしています。

注意点として、このようなドラッグ＆ドロップを実装する場合は、**dragoverでpreventDefault()を設定する必要があります。**そうしなければデフォルトの処理としてブラウザでファイルのプレビューが表示されてしまいます。

また**dropではstopPropagation()を設定します。**これをしなければ親要素でもdropイベントが発火してしまい、エラーが表示されてしまいます。

preventDefault()やstopPropagation()については、下記のイベント修飾子を参照してください。

See the Pen drop by b1san (@b1san1) on CodePen.

イベント修飾子

イベントを制御するために次のような修飾子が用意されています。

stop

イベントの伝搬を防ぎます。(stopPropagation()）

例では子要素（背景緑）側にstop修飾子を設定することで親要素（背景黒）のclickイベントの伝搬を止めています。

See the Pen dQpNOG by b1san (@b1san1) on CodePen.

prevent

要素のデフォルトアクションを抑止します。（preventDefault()）

例ではaタグのhref要素にalert()を仕込んでいますが、preventを設定しているほうでは発火していないことがわかります。

See the Pen qQaRxb by b1san (@b1san1) on CodePen.

capture

addEventListener() optionsのcaptureに該当します。

例を動かすとわかる通り子要素（背景緑）をクリックした場合のイベント発生順序が異なります。

See the Pen RqGKJg by b1san (@b1san1) on CodePen.

self

イベントが設定された要素自身にアクションした場合のみイベントが発火します。

例の「self設定なし」の場合は、すべての要素でクリックイベントが発火します。
「self設定あり」の場合は、.childの要素をクリックしてもイベントは発火せず、.parentの要素自身をクリックした場合のみ発火します。

See the Pen jQMydd by b1san (@b1san1) on CodePen.

## once

addEventListener() optionsのonceに該当します。

イベントの発火を一回に制限します。

See the Pen WYGRBL by b1san (@b1san1) on CodePen.

passive

addEventListener() optionsのpassiveに該当します。

preventDefault()の処理に依存せず処理を実行できるため、Scroll Jankの解決策として利用されます。

おわりに

フロントエンドのイベント理解するの難しい( ;∀;)