【Vue.js入門】15_イベントハンドリング

Vue.js入門第15回。今回は各種イベントハンドリングを確認してみます。

はじめに

今回は各種イベントハンドリングを確認してみます。既出のものもありますが復習も兼ねて一通りまとめて確認します。

インラインメソッドハンドラはv-onディレクティブ内にJavascript式を直接記述する方法です。

Clickボタンが押下されるたびに、counterプロパティをインクリメントしています。

メソッドイベントハンドラはあらかじめ定義しておいた関数をイベント発生時に呼び出す方法です。

Click2ボタンが押下されるたびにupdateCounterメソッドが呼び出され、counter2プロパティをインクリメントしています。また、関数の第一引数でeventオブジェクトを取得することも可能です。

また引数を指定することも可能で、updateMessageボタンを押すとメーセージhogehogeがfugafugaに更新されます。eventオブジェクトを参照したい場合は、HTML側で$eventと指定するとメソッド側で引数として受け取ることが可能になります。

インラインメソッドハンドラは手軽ですがロジックが分離するのでメソッドイベントハンドラを使うのが一般的なようです。

Vue.jsではv-onディレクティブのためにイベント修飾子というものが提供されています。イベント修飾子を使うことでクリックなどのDOMイベントの振る舞いを変更することが出来ます。

上記サンプルでは現在時刻を表示するボタンを２つ用意し、showCurrentDate2の方には.once修飾子を付与して１回のみ実行されるようにしています。

showCurrentDateボタンは押されるたびに時刻が更新されますが、showCurrentDate2ボタンは初回のみ表示されて以降は更新されないことが確認できます。

イベント修飾子には以下のようなものがあります。

イベント修飾子	振る舞い
.stop	イベントの親要素への伝搬を中止
.prevent	イベント規定の動作をキャンセル
.capture	イベントハンドラをキャプチャーモードで動作（子要素のイベント時に親要素のイベントを先に実行できる）
.self	子要素から親要素のイベントが発生しなくなる
.once	イベントを1回だけ実行
.passive	passiveモードを有効化（スクロールイベントでpreventDefault()の影響を無視して動作を滑らかにする）

特定のキーコードのキーが押された時に、特定のイベントハンドラを呼び出すといった場合に用いる修飾子です。
構文は「v-on:keyup.キーの種類」となります。

サンプルではESCまたはSPACEキー押下でテキストボックスを初期化しています。続けてキー修飾子を記述することで複数指定することが出来ます。また、escなどエイリアスではなくキー番号を指定することも可能です。

対応するキーが押されている場合のみイベントをフックすることが出来ます。

サンプルではCTRLキーを押しながらcキーが押されたらテキストボックスを初期化しています。

システム修飾子には以下のものがあります。

システム修飾子	詳細
.ctrl	ctrlキーが押されているとき
.alt	altキーが押されているとき
.shift	shiftキーが押されているとき
.meta	macではコマンドキー、Windwsではウィンドウズキーが押されているとき