イベントハンドリングの基本

ユーザー操作（クリックやホバーなど）を検知する仕組みがイベントです。Vue.jsでは、イベントコールバックの最初の引数に自動的にイベントオブジェクトが渡されます。このオブジェクトを利用することでDOM操作やイベント制御が可能です。

イベントオブジェクトの取得方法

メソッド宣言時にeパラメータを定義し、テンプレートで$eventを指定します。複数引数が必要な場合は最後に配置します。

<template>
  <button @click="handleEvent($event, 'submit')">実行</button>
</template>

<script>
export default {
  methods: {
    handleEvent(event, action) {
      console.log('イベントタイプ:', event.type);
      console.log('ターゲット要素:', event.target);
      console.log('アクション:', action);
    }
  }
}
</script>

主なプロパティ：

• event.target.value：入力フィールドの値取得
• event.currentTarget：イベントリスナーが設定された要素

イベント修飾子の実践的利用

修飾子を付加することでネイティブイベントの挙動を制御できます：

キーボード修飾子の応用

キー入力検出に特化した修飾子群：

<input 
  type="text"
  @keyup.esc="clearInput"
  @keyup.enter="submitForm"
  @keyup.tab="focusNextField"
>

主なキー修飾子：.enter, .space, .delete, .arrow-up など

マウス修飾子の活用

クリックタイプを指定する修飾子：

<div 
  @click.left="handlePrimaryClick"
  @click.right="showContextMenu"
  @click.middle="openNewTab"
>インタラクティブエリア</div>

exact修飾子による精密制御

修飾キーの組み合わせを厳密に制御：

<!-- Ctrlキー単体でのみ発火 -->
<button @click.ctrl.exact="triggerOnlyCtrl">Ctrl単体クリック</button>

<!-- Ctrl+Shiftの組み合わせで発火 -->
<button @click.ctrl.shift="triggerCtrlShift">Ctrl+Shiftクリック</button>

フォーム入力の最適化

v-modelと組み合わせた入力制御：

• .lazy：入力完了時（フォーカス外れ時）に値を更新

<input type="text" v-model.lazy="searchQuery">

• .trim：前後の空白を自動削除（中間の空白は保持）

<input type="text" v-model.trim="username">

• .number：数値入力の強制（先頭の数値部分のみ取得）

<input type="text" v-model.number="quantity">
<!-- "123abc" → 123, "abc123" → NaN -->