Vue.jsでイベントオブジェクトを取得する

概要

本記事では、Vueのディレクティブである v-on を使ってイベントオブジェクトを取得する方法を紹介します。

イベントオブジェクトとは

イベントオブジェクトは、イベントハンドラーおよびイベントリスナーにおいて実行される関数の引数として受け取ることのできるオブジェクトです。 そのイベントオブジェクトから、**発生したイベントに関わる様々な情報（プロパティ）**を知ることができ、またそのイベントを制御するメソッドを活用することができます。
詳しくは下記記事を参考にしてください。
https://phpjavascriptroom.com/?t=js&p=event_object

実際のコード

sampleTextというidを持たせたp要素の上にマウスを乗せた時、そのマウスの位置を取得し
その下のresultというidを持たせたp要素に表示させるという流れ。

index.html

<div id="app">
  <p id="sampleText" v-on:mousemove="mousePosition">ここにマウスを載せると下のX、Yの値が変わるよ</p>
  <p id="result">X:{{x}}, Y:{{y}}</p>
</div>

index.js

new Vue({
  el: '#app',
  data: {
    x: 0,
    y: 0
  },
  methods: {
    mousePosition: function(event) {
      this.x = event.clientX;
      this.y = event.clientY;
      // eventの中を見てみると、全てのイベントオブジェクトが入っている
      console.log(event);
    }
  }
})

補足

今回はclientX(Y)を取得したが、eventの中をconsole.logで見ると全ての情報が入っている。

補足2

引数に渡しているeventは好きなものに変えてもちゃんと動く。