Edited at

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


はじめに

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

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


メソッドハンドラ

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

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


イベント一覧

※すべてではないです 。


click, dblclick

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

See the Pen yQaMpY 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

submiされたときに発火するイベントです。

See the Pen zMKoaJ 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を設定した場合だと、親要素内の要素をクリックしてもイベントは発火せず、自身の要素をクリックした場合のみイベントが発火しています。

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の解決策として利用されます。


おわりに

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