HTML Living Standard/イベント属性

イベント属性（Event attributes）

イベント属性は、HTMLの要素に対してイベントハンドラーを指定するための属性群です。これらの属性を使用することで、ユーザーのインタラクションや要素の状態変化に応じて実行されるJavaScriptコードを定義できます。

イベント属性一覧

マウス関連のイベント

onclick：要素がクリックされたときに実行されます。
ondblclick：要素がダブルクリックされたときに実行されます。
onmousedown：マウスボタンが押下されたときに実行されます。
onmouseup：マウスボタンが解放されたときに実行されます。
onmouseover：マウスポインタが要素上に移動したときに実行されます。
onmouseout：マウスポインタが要素から離れたときに実行されます。
onmousemove：マウスポインタが要素上で移動したときに実行されます。
onmouseenter：マウスポインタが要素に入ったときに実行されます（バブリングなし）。
onmouseleave：マウスポインタが要素から出たときに実行されます（バブリングなし）。
onwheel：マウスホイールが回転したときに実行されます。
oncontextmenu：右クリックメニューが呼び出されたときに実行されます。
onauxclick：非プライマリボタンがクリックされたときに実行されます。

キーボード関連のイベント

onkeydown：キーが押下されたときに実行されます。
onkeyup：キーが解放されたときに実行されます。
onkeypress：印字可能な文字キーが押されたときに実行されます（非推奨）。

フォーカス関連のイベント

onfocus：要素がフォーカスを受け取ったときに実行されます。
onblur：要素がフォーカスを失ったときに実行されます。

フォーム関連のイベント

onsubmit：フォームが送信されるときに実行されます。
onreset：フォームがリセットされるときに実行されます。
onchange：フォーム要素の値が変更されたときに実行されます。
oninput：入力要素の値が変更されるたびに実行されます。
oninvalid：フォーム要素のバリデーションが失敗したときに実行されます。
onformdata：FormDataオブジェクトが作成されるときに実行されます。
onselect：テキストが選択されたときに実行されます。

クリップボード関連のイベント

oncopy：コピー操作が行われたときに実行されます。
oncut：切り取り操作が行われたときに実行されます。
onpaste：貼り付け操作が行われたときに実行されます。

ドラッグ＆ドロップ関連のイベント

ondrag：要素がドラッグされているときに実行されます。
ondragstart：ドラッグ操作が開始されたときに実行されます。
ondragend：ドラッグ操作が終了したときに実行されます。
ondragenter：ドラッグ要素が対象要素に入ったときに実行されます。
ondragleave：ドラッグ要素が対象要素から出たときに実行されます。
ondragover：ドラッグ要素が対象要素上にあるときに実行されます。
ondrop：要素がドロップされたときに実行されます。

メディア関連のイベント

oncanplay：メディアの再生準備が整ったときに実行されます。
oncanplaythrough：メディアが途切れることなく再生できる状態になったときに実行されます。
ondurationchange：メディアの長さが変更されたときに実行されます。
onemptied：メディアが空になったときに実行されます。
onended：メディアの再生が終了したときに実行されます。
onloadeddata：メディアの現在のフレームがロードされたときに実行されます。
onloadedmetadata：メタデータがロードされたときに実行されます。
onpause：メディアが一時停止されたときに実行されます。
onplay：メディアの再生が開始されたときに実行されます。
onplaying：メディアが実際に再生を開始したときに実行されます。
onprogress：メディアのダウンロード中に実行されます。
onratechange：再生速度が変更されたときに実行されます。
onseeked：シーク操作が完了したときに実行されます。
onseeking：シーク操作が開始されたときに実行されます。
onstalled：メディアのロードが停止したときに実行されます。
onsuspend：メディアのロードが中断されたときに実行されます。
ontimeupdate：再生位置が更新されたときに実行されます。
onvolumechange：音量が変更されたときに実行されます。
onwaiting：メディアが一時的に停止したときに実行されます。

その他のイベント

onbeforeinput：入力が行われる直前に実行されます。
onbeforematch：要素が検索結果として表示される直前に実行されます。
onbeforetoggle：details要素が開閉される直前に実行されます。
oncancel：ダイアログがキャンセルされたときに実行されます。
onclose：要素が閉じられたときに実行されます。
oncontextlost：WebGLコンテキストが失われたときに実行されます。
oncontextrestored：WebGLコンテキストが復元されたときに実行されます。
oncuechange：WebVTTキューが変更されたときに実行されます。
onerror：エラーが発生したときに実行されます。
onload：要素のロードが完了したときに実行されます。
onloadstart：要素のロードが開始されたときに実行されます。
onresize：要素のサイズが変更されたときに実行されます。
onscroll：要素がスクロールされているときに実行されます。
onscrollend：スクロールが終了したときに実行されます。
onsecuritypolicyviolation：コンテンツセキュリティポリシー違反が発生したときに実行されます。
onslotchange：スロットの割り当てが変更されたときに実行されます。
ontoggle：details要素が開閉されたときに実行されます。

使用例

<!-- 基本的なクリックイベントの例 -->
<button onclick="alert('クリックされました')">
  クリックしてください
</button>

<!-- フォーム処理の例 -->
<form onsubmit="return validateForm()" onreset="confirmReset()">
  <input type="text" 
         oninput="checkInput(this)" 
         onchange="updateValue(this)"
         onfocus="highlightField(this)"
         onblur="validateField(this)">
  <button type="submit">送信</button>
  <button type="reset">リセット</button>
</form>

<!-- ドラッグ＆ドロップの例 -->
<div draggable="true"
     ondragstart="handleDragStart(event)"
     ondrag="handleDrag(event)"
     ondragend="handleDragEnd(event)">
  ドラッグ可能な要素
</div>
<div ondrop="handleDrop(event)"
     ondragover="handleDragOver(event)">
  ドロップ領域
</div>

<!-- メディア要素の例 -->
<video src="video.mp4"
       onplay="startPlayback()"
       onpause="pausePlayback()"
       onended="videoEnded()"
       onvolumechange="volumeChanged()">
</video>

注意事項

イベント属性内のJavaScriptコードは、グローバルスコープで実行されます。
セキュリティ上の理由から、可能な限りaddEventListener()メソッドの使用が推奨されます。
イベント属性の値は文字列として解釈され、パフォーマンスに影響を与える可能性があります。
一部のイベントはモバイルデバイスでは異なる動作をする場合があります。
イベントの伝播（バブリングとキャプチャリング）に注意が必要です。
非推奨や実験的なイベントの使用は、互換性の問題を引き起こす可能性があります。

参考文献