イベントハンドリングとは
ボタンをクリックしたり、マウスオーバーやスクロールなどユーザーによる一連の挙動を「イベント」と呼ぶ。様々なイベントに対応して発動させる処理のことを「イベントハンドラ」と呼び、イベントハンドラをイベントと紐づけることを「ハンドル」という。
vueにおいてのイベントハンドラ
vueでイベントによってイベントハンドラを実行させるにはv-onディレクティブを用いる。
基本構文
<button v-on:イベント名="処理(関数)">add</button>
<button v-on:click="counter += 1">add</button>
省略記法
<div @イベント名="処理(関数)"></div>
sample.html
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>上のボタンがクリックされた回数{{ counter }} 回</p>
</div>
sample.js
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
ボタンをクリックすることでイベントハンドラが実行され、counterの数字が＋1されていく。
インラインメソッドハンドラ
ここではv-on属性の値に直接javascriptの式を記述している。このような記述法をインラインメソッドハンドラという。
メソッドイベントハンドラ
イベントハンドラの仕組みはより複雑になっていくので式ではなく、メソッドの名前に置き換えることで、すっきりとしたコードが記述できる。そのような記述方法をメソッドイベントハンドラという。
sample.html
<div id="app">
<!-- クリックすることでshowMessageメソッドが呼び出される -->
<button v-on:click="showMessage">ボタン</button>
<!-- 「こんにちわ」と表示される -->
<p>{{ msg }}</p>
</div>
sample.js
new Vue({
el: '#app',
data: function () {
return {
msg: ""
};
},
methods: {
// msgに「こんにちわ」が代入される
showMessage: function () {
this.msg = 'こんにちわ'
}
}
});
イベント一覧
| 記述 | イベントハンドラ実行タイミング |
|---|---|
| @click | クリック時 |
| @focus | フォーカス時 |
| @blur | フォーカスが外れた時 |
| @change | input変更時 |
| @dblclick | ダブルクリック時 |
| @submit | サブミット時 |
| @keyup | キーアップ時 |
| @keydown | キーダウン時 |
| @mouseover | カーソルを当てた時(hoverと同じ) |
| @mouseout | カーソルを外した時 |
| @mouseenter | カーソルを当てた時(子要素に反応させない) |
| @mouseleave | カーソルを外した時(子要素に反応させない) |
| @mousedown | マウスでクリックした時 |
| @mouseup | クリックしたマウスを上げた時 |
| @mousemove | マウス動かしてる時 |
| @touchstart | スマホとかでタッチした時 |
| @touchmove | タッチ状態から動かした時 |
| @touchend | 指を離した時 |
イベント修飾子
v-onディレクティブのイベントに対する制御をより細かく指定することのできる機能の総称をイベント修飾子という。通常のHTMLでは同じイベントをハンドルしたDOMがネストしている場合、バブリングといって子要素から外側（親要素方向）に向かって順にイベントが連鎖していく。イベント修飾子を付与することでそのバブリングを制御することができる。
基本構文.html
<button v-on:click.イベント修飾子="alert">add</button>
<!-- 修飾子は繋げることもできる -->
<button v-on:click.stop.prevent="alert">add</button>
イベント修飾子一覧
| 記述 | 機能 |
|---|---|
| .stop | イベントの連鎖を止める |
| .prevent | イベントの規定の動作をキャンセル |
| .capture | 子要素のイベント実行時に親要素のイベントを先に実行 |
| .self | 子要素から親要素のイベントが発生しなくなる |
| .once | イベントを一回だけ実行 |
| .passive | .preventの影響を無視 |
キー修飾子
特定のキーコードのキー入力時に、特定のイベントハンドラを呼び出す。
基本構文.html
<input type="text" v-on:keydown.キー修飾子="alert">
<!-- 複数つけた場合は「OR」を意味する -->
<input type="text" v-on:keydown.up.down.left.right="alert">
キー修飾子一覧
| 記述 | 機能 |
|---|---|
| .enter | enterが押されたとき |
| .tab | tabが押されたとき |
| .delete | deleteが押されたとき |
| .esc | escが押されたとき |
| .space | spaceが押されたとき |
| .up | 矢印の上キーが押されたとき |
| .down | 矢印の下キーが押されたとき |
| .left | 矢印の左キーが押されたとき |
| .right | 矢印の右キーが押されたとき |
システム修飾子
対応するキーが押されている場合にハンドラが呼び出される。
基本構文.html
<!-- shiftキーを押しながらクリックしたとき -->
<button v-on:click.shift="doDelete">削除ボタン</button>
システム修飾子一覧
| 記述 | 機能 |
|---|---|
| .ctrl | ctrlが押されている場合 |
| .alt | altが押されている場合 |
| .shift | shiftが押されている場合 |
| .meta | metaが押されている場合 |