【vue.js入門 #6】初心者でも理解できる!ディレクティブのイベントを解説

ディレクティブとはv-xxxx形式の属性でhtmlを操作するvue.jsの記述方法です。

前の記事でもディレクティブについては少し紹介しました。
https://liberty-dock.com/business_post/53184/

しかし、ディレクティブにはたくさんの機能があります。

大雑把に分けるとこの3つ。

  • イベント処理のv-on
  • 条件分岐のv-if
  • ループ処理のv-for

今回はv-onのイベントについて解説していきます。

ディレクティブのイベント処理とは?

どんなものかといいますと、ユーザーの操作をトリガーになんかしたの処理を実行させることになります。

ボタンをクリックした、入力値を変更した時や、マウスを動かした時などなど。

このような、実行のきっかけになるものをイベントと言い、そのイベントをもとに実行される処理のことをイベントハンドラーと言います。

vue.jsではイベントハンドラーをディレクティブで設定することができるのです。

vue.jsで利用できる主なイベントはこちら。

イベント名 概要
focus フォーカスされたとき
blur フォーカスが外れたとき
change 内容が変更されたとき
select テキストを選択したとき
submit フォームから送信したとき
click クリックしたとき
dbclick ダブルクリックしたとき
mousedown マウスのボタンを押したとき
mouseover マウスポインターが乗ったとき
mouseenter マウスポインターが乗ったとき
mouseleave マウスポインターが外れたとき
mouseout マウスポインターが外れたとき
mousemove マウスポインターが移動したとき
mouseup マウスのボタンを離したとき
keydown キーを押したとき
keyup キーを離したとき
keypress キーを押し続けているとき
resize ウィンドウサイズを変更したとき
scroll スクロールした時
error エラーが発生した時
contextmenu コンテキストメニューを表示する前

これらはvue.jsというより、javascriptのイベントでよく使われつものです。

イベント処理の基本がわかるサンプルコード

今回のサンプルコードで利用するのはfocusとblurのイベントです。

inputタグのフォーカスした時(focus)、とフォーカスを外した時(blur)に、実行される処理を書いてみます。

html

<div id="app">
   <input type="text" v-on:focus="onfocus" v-on:blur="onblur">
   <p>{{text}}</p>
</div>

js

var app = new Vue({
   el: '#app',
   data: {
       text: '',
   },
   methods: {
       onfocus: function () {
           this.text = 'フォーカスされました!'
       },
       onblur: function() {
           this.text = 'フォーカスが外れました!'
       }
   }
})

フォーカスされた時onfocusのイベントハンドラーが実行され、フォーカスを外した時、onblurが実行され、表示されるテキストが変更されるようになっています。

イベントオブジェクトで処理にアクセス

イベントオブジェクトとはイベントに関する情報で、アクセスすることでイベント処理を操作することができます。

発生したイベントの種類や発生元を取得したり、特定の条件の場合、イベントの実行をキャンセルといった処理が可能になります。

イベントの発生元にアクセスして、表示させてみましょう。

html

<div id="app">
   <button class="test" v-on:click="onclick($event, 'クリックされました!')">クリック</button>
   <p>{{text}}</p>
</div>

js

var app = new Vue({
   el: '#app',
   data: {
       text: '',
   },
   methods: {
       onclick: function (e, msg) {
           this.text = 'class="' + e.target.className + '"の' + e.target.tagName + 'タグが' + msg
       }
   }
})

第一引数にイベントオブジェクトをを設定しています。

$eventはvue.jsで決められた名前で、$eventじゃないとイベントオブジェクトを取得することはできません。

イベントの発生元のタグ名とclass名を表示させています。

イベントオブジェクトの主な取得内容はこちら。

プロパティ 概要
target イベント発生元の要素
type イベントの種類
timeStamp イベントの作成日時
clientX イベント発生時、ブラウザーでのX座標
clientY イベント発生時、ブラウザーでのY座標
screenX イベント発生時、スクリーンでのX座標
screenY イベント発生時、スクリーンでのY座標
pageX イベント発生時、ページでのX座標
pageY イベント発生時、ページでのY座標
offsetX イベント発生時、要素でのX座標
offsetY イベント発生時、要素でのY座標
stopPropagation() イベント発生時、親要素への伝播を中止
preventDefault() イベントの動作をキャンセル

まとめ

イベント系の処理は、javascriptやjqueryを扱ったことである人なら、ほとんど同じと感じるでしょう。

それくらい、jsではよく使う部分です。

初心者プログラマーの方であれば、vue.jsをきかっけにjsのイベントについて理解できるようになったのではないでしょうか。

正社員という奴隷制度に中指を立てるWebエンジニアです。PHPが得意。繋がれた鎖を断ち切るために、自由を取り戻すために、プログラミングスキルを磨く日々です。プログラミングと個人でもできるビジネスについて、情報発信しています。

詳しくはこちら