HTMLイベント属性

HTML イベント属性

HTML イベント属性は、HTML 要素に特定のイベントが発生した際に、JavaScript などのスクリプトを実行できるようにする仕組みです。HTML4 で導入され、ユーザー操作やブラウザイベントに対応して動的なウェブページを作成するために欠かせません。

イベント属性は、HTML タグ内に属性として記述し、属性値として実行するスクリプトを指定します。

詳しくは、JavaScript チュートリアルをご覧ください。

以下は、標準的なイベント属性と、それぞれの詳細です。

グローバルイベント属性

HTML4 の新機能の一つで、HTML イベントをトリガーにしてブラウザに動作を行わせることができます。例えば、ユーザーが HTML 要素をクリックした時に JavaScript を実行するといったことが可能です。

属性 値 説明
onafterprint  script 文書が印刷された後にスクリプトを実行します。
onbeforeprint  script 文書が印刷される前にスクリプトを実行します。
onbefore"ng-star-inserted"> script 文書が読み込まれる前にスクリプトを実行します。
onblur script ウィンドウがフォーカスを失ったときにスクリプトを実行します。
onerror  script エラーが発生したときにスクリプトを実行します。
onfocus script ウィンドウがフォーカスを取得したときにスクリプトを実行します。
onhashchange  script 文書のハッシュ部分が変化したときにスクリプトを実行します。
"ng-star-inserted">script 文書が読み込まれたときにスクリプトを実行します。
onmessage  script メッセージがトリガーされたときにスクリプトを実行します。
onoffline  script 文書がオフラインになったときにスクリプトを実行します。
ononline  script 文書がオンラインになったときにスクリプトを実行します。
onpagehide  script ウィンドウが非表示になったときにスクリプトを実行します。
onpageshow  script ウィンドウが表示されたときにスクリプトを実行します。
onpopstate  script ウィンドウの履歴が変化したときにスクリプトを実行します。
onredo  script 文書に対して redo 操作が実行されたときにスクリプトを実行します。
onresize  script ウィンドウのサイズが変更されたときにスクリプトを実行します。
onstorage  script Web Storage 領域が更新されたとき (ストレージ内のデータが変更されたとき) にスクリプトを実行します。
onundo  script 文書に対して undo 操作が実行されたときにスクリプトを実行します。
onunload  script ユーザーが文書から離れたときにスクリプトを実行します。

: HTML5 で追加されたイベント属性

フォームイベント

フォームイベントは、HTML フォーム内で発生するイベントです (すべての HTML 要素に適用できますが、その HTML 要素は form 要素内にある必要があります)。

属性 値 説明
onblur script 要素がフォーカスを失ったときにスクリプトを実行します。
onchange script 要素が変更されたときにスクリプトを実行します。
oncontextmenu  script コンテキストメニューが表示されたときにスクリプトを実行します。
onfocus script 要素がフォーカスを取得したときにスクリプトを実行します。
onformchange  script フォームが変更されたときにスクリプトを実行します。
onforminput  script フォームがユーザー入力を受け付けたときにスクリプトを実行します。
oninput  script 要素がユーザー入力を受け付けたときにスクリプトを実行します。
oninvalid  script 要素が無効になったときにスクリプトを実行します。
onreset script フォームがリセットされたときにスクリプトを実行します。HTML5 ではサポートされていません。
onselect script 要素が選択されたときにスクリプトを実行します。
onsubmit script フォームが送信されたときにスクリプトを実行します。

キーボードイベント

属性 値 説明
onkeydown script キーが押されたときにスクリプトを実行します。
onkeypress script キーが押されてから離されるまでの間にスクリプトを実行します。
onkeyup script キーが離されたときにスクリプトを実行します。

マウスイベント

マウスイベントは、ユーザーのマウス操作によって発生するイベントです。

属性 値 説明
onclick script マウスをクリックしたときにスクリプトを実行します。
ondblclick script マウスをダブルクリックしたときにスクリプトを実行します。
ondrag  script 要素がドラッグされているときにスクリプトを実行します。
ondragend  script ドラッグ操作が終了したときにスクリプトを実行します。
ondragenter  script 要素が有効なドロップターゲットにドラッグされたときにスクリプトを実行します。
ondragleave  script 要素が有効なドロップターゲットからドラッグアウトされたときにスクリプトを実行します。
ondragover  script 要素が有効なドロップターゲットの上を通過中にスクリプトを実行します。
ondragstart  script ドラッグ操作が開始されたときにスクリプトを実行します。
ondrop  script ドラッグされた要素がドロップされたときにスクリプトを実行します。
onmousedown script マウスボタンが押されたときにスクリプトを実行します。
onmousemove script マウスポインタが移動したときにスクリプトを実行します。
onmouseout script マウスポインタが要素の外に移動したときにスクリプトを実行します。
onmouseover script マウスポインタが要素の上に移動したときにスクリプトを実行します。
onmouseup script マウスボタンが離されたときにスクリプトを実行します。
onmousewheel  script マウスホイールが回転したときにスクリプトを実行します。
onscroll  script 要素のスクロールバーがスクロールされたときにスクリプトを実行します。

メディアイベント

メディアイベントは、ビデオ、画像、音声などのメディア要素によって発生するイベントです。 <audio>、<embed>、<img>、<object>、<video> などの HTML メディア要素に多く使用されます。

属性 値 説明
onabort script 中止イベントが発生したときにスクリプトを実行します。
oncanplay  script メディアの再生が開始できる状態になったが、バッファリングのために再生が中断される可能性があるときにスクリプトを実行します。
oncanplaythrough  script メディアの再生が開始できる状態になり、バッファリングなしで最後まで再生できる状態になったときにスクリプトを実行します。
ondurationchange  script メディアの長さが変更されたときにスクリプトを実行します。
onemptied  script メディアリソース要素が突然空になったとき (ネットワークエラー、読み込みエラーなど) にスクリプトを実行します。
onended  script メディアが最後まで再生されたときにスクリプトを実行します。
onerror  script 要素の読み込み中にエラーが発生したときにスクリプトを実行します。
"ng-star-inserted"> script メディアデータの読み込みが完了したときにスクリプトを実行します。
"ng-star-inserted"> script メディアの長さやその他のメタデータの読み込みが完了したときにスクリプトを実行します。
"ng-star-inserted"> script ブラウザがメディアデータの読み込みを開始したときにスクリプトを実行します。
onpause  script メディアデータの再生が一時停止されたときにスクリプトを実行します。
onplay  script メディアデータの再生が開始されようとしているときにスクリプトを実行します。
onplaying  script メディアデータの再生が開始されたときにスクリプトを実行します。
onprogress  script ブラウザがメディアデータを取得しているときにスクリプトを実行します。
onratechange  script メディアデータの再生速度が変更されたときにスクリプトを実行します。
onreadystatechange  script readyState が変更されたときにスクリプトを実行します。
onseeked  script メディア要素の seeking 属性が false になり、シークが終了したときにスクリプトを実行します。
onseeking  script メディア要素の seeking 属性が true になり、シークが開始されたときにスクリプトを実行します。
onstalled  script メディアデータの取得中にエラーが発生し、取得が停止したときにスクリプトを実行します。
onsuspend  script ブラウザがメディアデータの取得を中断したときにスクリプトを実行します。
ontimeupdate  script メディアの再生位置が変更されたときにスクリプトを実行します。
onvolumechange  script メディアの音量が変更されたとき、またはミュート状態が変更されたときにスクリプトを実行します。
onwaiting  script メディアの再生が停止したが、再生を継続する予定であるときにスクリプトを実行します。

その他のイベント

属性 値 説明
onshow  script <menu> 要素がコンテキストメニューとして表示されたときにスクリプトを実行します。
ontoggle  script <details> 要素が開閉されたときにスクリプトを実行します。

質問と回答（Q&A）

Q1: イベント属性を使用する利点は？

A1: イベント属性を使用することで、HTMLの構造とJavaScriptの動作を密接に結び付けることができ、ユーザーのアクションに応じた動的なインタラクションを実現できます。

Q2: HTML 5で追加された新しいイベント属性は何ですか？

A2: HTML 5では、多くの新しいイベント属性が追加されました。例として onafterprint, onbeforeprint, oncanplay などがあります。

Q3: どのようにしてイベント属性を使用しますか？

A3: イベント属性はHTML要素のタグ内で直接指定します。たとえば、<button onclick="alert('Button clicked!')">Click me!</button> のように記述します。