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

## 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>
```

```:表示結果
・クリック前
結果：未送信
・クリック後
結果：送信しました
```




# イベントの一例

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

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


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

## その他
<table>
	<tr>
		<td>修飾子</td>
		<td>内容</td>
	</tr>
	<tr>
		<td>resize</td>
		<td>要素サイズが変更されたとき</td>
	</tr>
	<tr>
		<td>scroll</td>
		<td>スクロールされたとき</td>
	</tr>
</table>