HTML5標準イベントとは？イベント属性の種類と使い方を徹底解説

HTML5標準イベントとは

ユーザーがウェブサイトを訪れると、テキストや画像をクリックしたり、リンクを選択したり、要素の上にマウスカーソルを重ねたりと、さまざまな操作を行います。こうしたユーザーの動きこそが、JavaScriptにおける「イベント」の典型例です。

イベントへの反応として実行される処理（イベントハンドラー）は、JavaScriptやVBScriptで記述できます。さらに、HTML5ではイベントハンドラーをタグの属性値として直接指定することも可能で、仕様には数多くのイベント属性が定義されています。

イベントハンドラーの基本的な書き方

たとえば、ボタンがクリックされたタイミングで処理を実行したい場合は、次のようにonclick属性へJavaScriptのコードを記述します。

<button onclick="showMessage()">クリックしてください</button>

このように、HTML側にイベント属性を埋め込むだけで、ユーザーの操作に応じた動的な挙動を手軽に実装できます。

HTML5で定義される主なイベント属性一覧

HTML5の仕様には非常に多くのイベント属性が含まれています。ここでは、理解しやすいようにカテゴリ別に分類して紹介します。すべてのイベント属性の値には、実行したいスクリプト（script）を指定します。

ウィンドウ・ドキュメント関連のイベント

マウス操作関連のイベント

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

フォーム関連のイベント

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

メディア（音声・動画）関連のイベント

まとめ

HTML5のイベント属性を使いこなせば、クリックや入力、ドラッグ＆ドロップ、動画再生など、ユーザーのあらゆる操作に応答するインタラクティブなウェブページを構築できます。まずはonclickやonloadなど使用頻度の高いイベントから試してみて、徐々に対応範囲を広げていくのがおすすめです。