はじめに
はじめまして、学生エンジニアの@huyunokiです。
イベントハンドラーとは
「イベントが発生したときに、どんな処理をするか？」を決定するのがイベントハンドラーです。ここでは@clickや@inputなど、基本的なDOMイベント名を一覧で確認できます。
このチートシートは、v-on:イベント名 または短縮形の @イベント名 で利用可能な主要なDOMイベントの一覧です。
関連チートシート
基本構文
イベント発生時に実行する処理を指定します。
<!-- v-onディレクティブの基本形 -->
<タグ名 v-on:イベント名="メソッド名" >
<!-- 短縮形（推奨） -->
<button @click="handleClick">クリック</button>
主要なイベント名一覧（チートシート）
| カテゴリ | イベント名 | 発生条件 | 構文例 |
|---|---|---|---|
| マウス | click |
要素がクリックされた時 | @click="doSomething" |
dblclick |
要素がダブルクリックされた時 | @dblclick="editItem" |
|
mousedown |
マウスボタンが押された時 | @mousedown="startDrag" |
|
mouseup |
押されていたマウスボタンが離された時 | @mouseup="endDrag" |
|
mousemove |
マウスカーソルが要素上で移動した時 | @mousemove="trackPosition" |
|
mouseover |
マウスカーソルが要素に入った時 | @mouseover="showTooltip" |
|
mouseout |
マウスカーソルが要素外に出た時 | @mouseout="hideTooltip" |
|
| キーボード | keydown |
キーが押された時（押しっぱなしで連続発生） | @keydown="handleKeyPress" |
keyup |
押されていたキーが離された時 | @keyup="searchContent" |
|
| フォーム | input |
<input>や<textarea>の値が変更されるたび |
@input="updateValue" |
change |
値の変更が確定した時 (Enterやフォーカス移動時など) | @change="validateForm" |
|
submit |
フォームが送信された時 | @submit.prevent="submitForm" |
|
focus |
要素がフォーカスを取得した時 | @focus="setActive" |
|
blur |
要素がフォーカスを失った時 | @blur="checkValidity" |
|
| その他 | scroll |
要素がスクロールされた時 | @scroll="onScroll" |
load |
ページや画像などのリソースの読み込みが完了した時 | @load="imageLoaded" |