JavaScript（Nuxt.js）のeventオブジェクトとは

概要

JavaScript(Nuxt.js)におけるeventオブジェクトについて学習したので備忘録として記載します。

eventオブジェクトとは

eventオブジェクトとは、ユーザーによってイベント（クリックイベントなど）が発生した際に
そのイベントの情報が格納されたものです。
プロパティを呼び出すことや、メソッドを使用することができます。

プロバティ例

Event.target: イベントが発生した要素
Event.type : イベントの名前
...etc

メソッド例

Event.preventDefault(): イベントのデフォルトの挙動をキャンセル
...etc

使用例

使用方法は関数に第一引数を取るだけです。
引数名は何でもいいのですが、慣例的にeやeventとすることが多いです。

index.vue

<template>
  <v-btn
    @click='type'　　 <!-- clickされた際にtype関数を呼び出す -->
  />
</template>

<script>
export default {
  methods: {
    type(event) { // 第一引数にeventを設定
      console.log(event.type)  // コンソールにイベント名のclickが表示される
    }
  }
}
</script>

その他のプロパティやメソッドは下記参考文献を参照ください。

参考文献

MDN Web Docs