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

Web

この記事は以前Qiitaに投稿した記事のミラーです。

【Vue.js】イベントハンドリングをサンプルを作りながら理解する - Qiita
※ 2020/04/13 drag, drop系を追記しました ※ 2020/07/22 formの内容を修正しました はじめに フロントエンド自体が初心者なので正直この辺りについては全然理解が追い付いてないです。 今回は簡単...

メソッドハンドラ

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

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

イベント一覧

※すべてではないです。

click, dblclick

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

See the Pen
oNvRqLd
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されたときに発火するイベントです。

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

- Vue.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました