vue.js編~イベントハンドリング~

ユーザーの操作を検知する

ブラウザの中で発生する出来事をイベントと呼び、イベントの発生をプログラムで検知して処理を行うことをイベントハンドラーと呼びます。

よく使われるイベント

イベント名	発生タイミング
blur	フォーム要素からフォーカスが外れたとき
focus	フォーム要素にフォーカスが当たったとき
select	フォーム要素内のテキストが選択されたとき
change	フォーム要素の選択肢や入力内容が変更されたとき
submit	フォームを送信しようとしたとき
reset	フォームがリセットされたとき
load	画像やスクリプトなどのリソースの読み込みが完了したとき
scroll	要素の内容がスクロールしたとき
resize	ウィンドウのサイズが変更されたとき
click	要素をクリックしたとき
keydown	キーを押したとき
keyup	キーを放したとき
keypress	押していたキーを放したとき(keyupよりも先に発生)
mousemove	マウスカーソルが要素内で動いたとき
mouseover	マウスカーソルが要素内に入ったとき
mousedown	要素をマウスでクロックしたとき
mouseout	マウスカーソルが要素の外に出たとき
mouseup	要素内でマウスのボタンを放したとき
touchstart	要素を指でタッチしたとき
touchmove	要素をタッチした指でドラッグしたとき
touchend	ようそをタッチした指を放したとき

イベントハンドラの登録(v-onディレクティブ)

<要素 v-on: イベント名="ハンドラ名">

methods: {ハンドラ名: 関数オブジェクト}

クリックイベント

HTML

<div id="app">
<template v-if="stock >= 1">
  <span class="num">在庫はあと{{stock}}個</span>
  <button class="btn" v-on:click="onDeleteItem">削除ボタン</button>
</template>
<template v-else>在庫切れです</template>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    stock: 7
  },
  methods: {
    onDeleteItem: function() {
      this.stock--;
    }
  }
});

コンポーネントの外側のイベントハンドリング

v-onディレクティブでイベントハンドラを登録できるのは、elオプションに指定したコンポーネントのスコープ内にある要素に限られます。
<div id="app"></div>の外側にある要素やウィンドウ自体に発生するイベントはv-onで検知できません。
これらは、Vueに頼らずにaddEventListener関数を使ってイベントハンドラを登録します。
ただし、Vueを介さずに登録したイベントハンドラは、不要になったタイミングでremoveEventListener関数を呼び出して解除しなければなりません。

resizeイベントのハンドリング

ウィンドウの横幅：{{width}}
ウィンドウの高さ：{{height}}

HTML

<div id="app2">
ウィンドウの横幅：{{width}}<br>
ウィンドウの高さ：{{height}}
</div>

JavaScript

var app2 = new Vue({
  el: '#app2',
  data: {
    width: window.innerWidth,
    height: window.innerHeight
  },
  created: function () {
    //イベントハンドラを登録
    addEventListener('resize', this.resizeHandler);
  },
  beforeDestroy: function () {
    //イベントハンドラを解除
    removeEventListener('resize', this.resizeHandler);
  },
  methods: {
    //イベントハンドラ
    resizeHandler: function ($event) {
      this.width = $event.target.innerWidth;
      this.height = $event.target.innerHeight;
    }
  }
});

イベントハンドラが受け取る引数

イベントが発生したとき、ブラウザはイベントオブジェクトという特別なオブジェクトを生成してイベントハンドラの引数で渡してくれます。
Vueでは$eventという変数名でイベントオブジェクトを受け取ります。
先程のtargetにはwindowオブジェクトが代入されています。そのため、windowオブジェクトが持っているinnerWidthやinnerHeightといったプロパティをtargetから引き出すことができます。

マウスでクリックした場所の座標値

マウスカーソルの位置：{{point.x}},{{point.y}}

HTML

<div id="app3">
  <p>マウスカーソルの位置：{{point.x}},{{point.y}}</p>
</div>

JavaScript

var app3 = new Vue({
  el: '#app3',
  data: {
    point: {
      x: 0,
      y: 0
    }
  },
  created: function () {
    //イベントハンドラを登録
    addEventListener('mousemove', this.mousemoveHandler);
  },
  beforeDestroy: function () {
    //イベントハンドラを解除
    removeEventListener('mousemove', this.mousemoveHandler);
  },
  methods: {
    mousemoveHandler: function ($event) {
      this.point.x = $event.clientX;
      this.point.y = $event.clientY;
    }
  }
});