イベント一覧表

1. マウスイベント

JavaScript イベント名	HTML 属性	型	説明	fromEventで利用可否
click	onclick	MouseEvent	要素がクリックされたとき	✅
dblclick	ondblclick	MouseEvent	要素がダブルクリックされたとき	✅
mousedown	onmousedown	MouseEvent	マウスボタンが押されたとき	✅
mouseup	onmouseup	MouseEvent	マウスボタンが離されたとき	✅
mousemove	onmousemove	MouseEvent	マウスが動いたとき	✅
mouseover	onmouseover	MouseEvent	マウスが要素の上に来たとき	✅
mouseout	onmouseout	MouseEvent	マウスが要素の外に出たとき	✅
mouseenter	onmouseenter	MouseEvent	マウスが要素に入ったとき（バブリングなし）	✅
mouseleave	onmouseleave	MouseEvent	マウスが要素から出たとき（バブリングなし）	✅
contextmenu	oncontextmenu	MouseEvent	右クリックメニューが開かれたとき	✅

2. ポインターイベント

JavaScript イベント名	HTML 属性	型	説明	fromEventで利用可否
pointerdown	onpointerdown	PointerEvent	ポインター（タッチ、ペン、マウス）が押されたとき	✅
pointerup	onpointerup	PointerEvent	ポインターが離されたとき	✅
pointermove	onpointermove	PointerEvent	ポインターが動いたとき	✅
pointerover	onpointerover	PointerEvent	ポインターが要素の上に来たとき	✅
pointerout	onpointerout	PointerEvent	ポインターが要素の外に出たとき	✅
pointerenter	onpointerenter	PointerEvent	ポインターが要素に入ったとき（バブリングなし）	✅
pointerleave	onpointerleave	PointerEvent	ポインターが要素から出たとき（バブリングなし）	✅
pointercancel	onpointercancel	PointerEvent	ポインター操作がキャンセルされたとき	✅
gotpointercapture	ongotpointercapture	PointerEvent	ポインターのキャプチャを取得したとき	✅
lostpointercapture	onlostpointercapture	PointerEvent	ポインターのキャプチャを失ったとき	✅

3. タッチイベント

JavaScript イベント名	HTML 属性	型	説明	fromEventで利用可否
touchstart	ontouchstart	TouchEvent	画面がタッチされたとき	✅
touchmove	ontouchmove	TouchEvent	タッチした指が移動したとき	✅
touchend	ontouchend	TouchEvent	タッチが終了したとき	✅
touchcancel	ontouchcancel	TouchEvent	タッチがキャンセルされたとき	✅

4. キーボードイベント

JavaScript イベント名	HTML 属性	型	説明	fromEventで利用可否
keydown	onkeydown	KeyboardEvent	キーが押されたとき	✅
keypress	onkeypress	KeyboardEvent	⚠️ 非推奨（Deprecated） - keydownを使用してください	✅
keyup	onkeyup	KeyboardEvent	キーが離されたとき	✅

keypress イベントについて

keypressイベントはWeb標準で非推奨となっています。

非推奨の理由:

• 国際化対応が不十分（日本語入力などで問題が発生）
• 修飾キー（Shift、Ctrl、Alt）との組み合わせで挙動が不安定
• モバイルデバイスでのサポートが限定的

推奨される代替方法:

// ❌ 非推奨
fromEvent(input, 'keypress')
  .subscribe(event => console.log(event));

// ✅ 推奨: keydownを使用
fromEvent<KeyboardEvent>(input, 'keydown')
  .subscribe(event => console.log(event.key));

ユースケース別の推奨イベント:

• 文字入力の検知: inputイベント（推奨）
• キー操作の検知: keydownイベント
• キーリリースの検知: keyupイベント

5. フォーカス関連イベント

JavaScript イベント名	HTML 属性	型	説明	fromEventで利用可否
focus	onfocus	FocusEvent	要素にフォーカスが当たったとき	✅
blur	onblur	FocusEvent	要素からフォーカスが外れたとき	✅
focusin	onfocusin	FocusEvent	要素または子要素にフォーカスが入ったとき	✅
focusout	onfocusout	FocusEvent	要素または子要素からフォーカスが外れたとき	✅

6. フォームイベント

JavaScript イベント名	HTML 属性	型	説明	fromEventで利用可否
change	onchange	Event	入力内容が変更されたとき	✅
input	oninput	InputEvent	入力フィールドの値が変更されたとき	✅
submit	onsubmit	SubmitEvent	フォームが送信されたとき	✅
reset	onreset	Event	フォームがリセットされたとき	✅
select	onselect	Event	テキストが選択されたとき	✅

7. ドラッグ & ドロップイベント

JavaScript イベント名	HTML 属性	型	説明	fromEventで利用可否
drag	ondrag	DragEvent	要素がドラッグされている間	✅
dragstart	ondragstart	DragEvent	ドラッグが開始されたとき	✅
dragend	ondragend	DragEvent	ドラッグが終了したとき	✅
dragover	ondragover	DragEvent	ドラッグした要素が他の要素の上にあるとき	✅
dragenter	ondragenter	DragEvent	ドラッグした要素がターゲットに入ったとき	✅
dragleave	ondragleave	DragEvent	ドラッグした要素がターゲットから外れたとき	✅
drop	ondrop	DragEvent	ドラッグされた要素がドロップされたとき	✅

8. ウィンドウ & ドキュメントイベント

JavaScript イベント名	HTML 属性	型	説明	fromEventで利用可否
load	onload	Event	ページが完全に読み込まれたとき	✅
resize	onresize	UIEvent	ウィンドウサイズが変更されたとき	✅
scroll	onscroll	Event	ページがスクロールされたとき	✅
unload	onunload	Event	ページが閉じられたとき	❌
beforeunload	onbeforeunload	BeforeUnloadEvent	ページが閉じられる直前	❌
error	onerror	ErrorEvent	エラーが発生したとき	✅
visibilitychange	onvisibilitychange	Event	ページの表示状態が変わったとき（タブの切り替えなど）	✅
fullscreenchange	onfullscreenchange	Event	フルスクリーンの状態が変化したとき	✅

9. メディアイベント

JavaScript イベント名	HTML 属性	型	説明	fromEventで利用可否
play	onplay	Event	メディアの再生が開始されたとき	✅
pause	onpause	Event	メディアの再生が一時停止されたとき	✅
ended	onended	Event	メディアの再生が終了したとき	✅
volumechange	onvolumechange	Event	メディアの音量が変更されたとき	✅
seeking	onseeking	Event	メディアのシークが開始されたとき	✅
seeked	onseeked	Event	メディアのシークが完了したとき	✅
timeupdate	ontimeupdate	Event	メディアの再生時間が更新されたとき	✅

10. アニメーション & トランジションイベント

JavaScript イベント名	HTML 属性	型	説明	fromEventで利用可否
animationstart	onanimationstart	AnimationEvent	アニメーションが開始されたとき	✅
animationend	onanimationend	AnimationEvent	アニメーションが終了したとき	✅
animationiteration	onanimationiteration	AnimationEvent	アニメーションが繰り返されたとき	✅
transitionstart	ontransitionstart	TransitionEvent	CSSトランジションが開始されたとき	✅
transitionend	ontransitionend	TransitionEvent	CSSトランジションが終了したとき	✅

11. その他のイベント

JavaScript イベント名	HTML 属性	型	説明	fromEventで利用可否
wheel	onwheel	WheelEvent	マウスホイールが回転したとき	✅
abort	onabort	UIEvent	リソースの読み込みが中断されたとき	✅
hashchange	onhashchange	HashChangeEvent	URL のハッシュ（#section1 など）が変更されたとき	✅
message	onmessage	MessageEvent	Web Workers や iframe からメッセージを受信したとき	❌
online	ononline	Event	ネットワークがオンライン状態に戻ったとき	✅
offline	onoffline	Event	ネットワークがオフラインになったとき	✅
popstate	onpopstate	PopStateEvent	history.pushState や history.back による状態変化時	❌
storage	onstorage	StorageEvent	localStorage または sessionStorage が変更されたとき	❌
languagechange	onlanguagechange	Event	言語設定が変更されたとき（ブラウザの設定変更）	❌