［Vue3］v-onイベントざっくりまとめ

概要

v-onでhtmlタグにイベントリスナを設定する。

v-on

記法

v-on:イベント名="メソッド名"

App.vue

<script setup lang="ts">
import { ref } from "vue";

const text = ref("クリックして");
const onButtonClick = (): void => {
	const ret = "クリックしたよ";
	randValue.value = String(rand);
};
</script>

<template>
	<section>
		<button v-on:click="onButtonClick">クリック</button>
		<p>クリックの結果: {{ text }}</p>
	</section>
</template>

表示結果

・クリック前
クリックの結果：クリックして
・クリック後
クリックの結果：クリックしたよ

引数の設定

関数に引数を渡すことが可能。
ただし、引数がある場合はイベントオブジェクトを$eventで記述する必要がある。

値を渡す引数のみの場合

App.vue

<script setup lang="ts">
import { ref } from "vue";

const text = ref("クリック前");
const onBtnClick = (args: string): void => {
	text.value = args;
};
</script>

<template>
	<button v-on:click="onBtnClick('クリック後')">クリック</button>
	<p>クリックの結果：{{ text }}</p>
</template>

表示結果

・クリック前
クリックの結果：クリック前
・クリック後
クリックの結果：クリック後

$event引数が必要な場合

App.vue

<script setup lang="ts">
import { ref } from "vue";

const text = ref("クリック前");
const msg = ref("メッセージ");
const onBtnClick = (args: string, event: MouseEvent): void => {
	text.value = args;
	msg.value = event.timeStamp.toString();
};
</script>

<template>
	<button v-on:click="onBtnClick('クリック後', $event)">クリック</button>
	<p>text：{{ text }}</p>
	<p>msg：{{ msg }}</p>
</template>

表示結果

・クリック前
text：クリック前
mag：メッセージ

・クリック後
text：クリック前
mag：Event.timeStampの値

App.vue

<script setup lang="ts">
import { ref } from "vue";

const text = ref("クリックして");
const onButtonClick = (): void => {
	const ret = "クリックしたよ";
	randValue.value = String(rand);
};
</script>

<template>
	<section>
		<button v-on:click="onButtonClick">クリック!</button>
		<p>クリックの結果: {{ text }}</p>
	</section>
</template>

表示結果

・クリック前
クリックの結果：クリックして
・クリック後
クリックの結果：クリックしたよ

v-onの修飾子

修飾子	内容
stop	イベントのバブリングをキャンセル
capture	イベントリスナをキャプチャモードに設定
self	イベントが該当要素で発生した場合のみ実行
prevent	イベントの既定の処理をキャンセル
passive	該当イベントんおデフォルトの挙動が即時実行される
once	イベントの実行を一回のみとする

v-on修飾子の記述例（preventの例）

記法

v-on:イベント名.修飾子="メソッド名"

App.vue

<script setup lang="ts">
import { ref } from "vue";

const msg = ref("未送信");
const onFormSubmit = (): void => {
	msg.value = "送信しました";
};
</script>

<template>
	<form action="#" v-on:submit.prevent="onFormSubmit">
		<input type="text" required>
		<button type="submit">送信</button>
	</form>
	<p>結果：{{ msg }}</p>
</template>

表示結果

・クリック前
結果：未送信
・クリック後
結果：送信しました

イベントの一例

フォーカス

修飾子	内容
blur	フォーカスを失ったとき
focus	フォーカスを受けたとき
focusin	フォーカスを失ったとき（親要素でもイベント検出可能）
focusout	親要素でもイベント検出可能

マウス

修飾子	内容
click	クリック
dbclick	ダブルクリック
mousemove	マウスが移動したとき
mousedown	マウスのボタンが押されたとき
mouseup	マウスのボタンが放されたとき
mouseenter	マスポインタが要素に入ったとき（自要素のみ）
mouseleave	マスポインタが要素にから出たとき（自要素のみ）
mouseout	マスポインタが要素に入ったとき（子要素含む）
mouseover	マスポインタが要素にから出たとき（子要素含む）
wheel	マウスホイールが回転したとき

入力

修飾子	内容
change	入力が変更されたとき
input	入力が更新されたとき
keydown	キーが押下されたとき
keypress	キーを押下して文字が入力されたとき
keyup	キーが離されたとき
select	テキストが選択されたとき

その他

修飾子	内容
resize	要素サイズが変更されたとき
scroll	スクロールされたとき