JavaScriptのイベントとは？仕組みと代表的なイベント属性をわかりやすく解説
JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて処理されます。
JavaScriptにおけるイベントとは
イベントとは、Webページ上で起こるさまざまな「出来事」のことです。例えば、以下のような操作や状態の変化がすべてイベントとして扱われます。
- ページの読み込み（ロード）が完了したとき
- ユーザーがボタンをクリックしたとき
- キーボードの任意のキーが押されたとき
- ウィンドウが閉じられたとき
- ウィンドウのサイズが変更されたとき
イベントを使ってできること
開発者はこれらのイベントをきっかけとして、JavaScriptのコードを実行できます。これにより、ボタンクリックでウィンドウを閉じる、ユーザーへメッセージを表示する、入力データの妥当性を検証するなど、実にさまざまな応答処理を実装することが可能です。
つまりイベントは、静的なHTMLページに動的な振る舞いを持たせるための重要な仕組みといえます。
HTML5の標準イベント属性一覧
以下は、HTML5で定義されている主な標準イベント属性の一覧です。各属性には、イベント発生時に実行したいJavaScriptコード（script）を値として指定します。
| 属性 | 値 | 説明 |
| offline | script | ドキュメントがオフラインになったときに発火します |
| onabort | script | 中断（アボート）イベントが発生したときに発火します |
| onafterprint | script | ドキュメントの印刷が完了した後に発火します |
| onbeforeonload | script | ドキュメントが読み込まれる前に発火します |
| onbeforeprint | script | ドキュメントが印刷される前に発火します |
| onblur | script | ウィンドウがフォーカスを失ったときに発火します |
| oncanplay | script | メディアの再生を開始できるものの、バッファリングのために一時停止する可能性があるときに発火します |
| oncanplaythrough | script | バッファリングで停止することなく、メディアを最後まで再生できる状態になったときに発火します |
| onchange | script | 要素の内容が変更されたときに発火します |
これらのイベント属性を適切に活用することで、ユーザーの操作に柔軟に反応するインタラクティブなWebページを構築できます。
-
JavaScriptのabortイベントとは？画像読み込みの中断を検知する使い方を解説
JavaScriptの abortイベント（onabort）は、画像などのリソースの読み込みがユーザーやブラウザによって中断されたときに発生するイベントです。例えば、ページの表示中にユーザーが別のページへ移動したり、読み込みを停止した場合などに発火します。 このイベントは主に <img> 要素に対して使用され、onabort 属性または addEventListener() を使ってハンドラを登録できます。画像の読み込みが途中で止まった際に、エラーメッセージを表示したり、代替処理を実行したりするのに役立ちます。 abortイベントの基本的な実装例 以下のコードでは、画像の読み込みが
-
JavaScriptのイベントキャプチャとは？仕組みと実装方法を解説
イベントキャプチャ（Event Capturing）とはイベントキャプチャとは、発生したイベントがDOMツリーの最上位要素からターゲット要素へと向かって伝播していく仕組みのことです。これは、ターゲット要素から最上位要素へと逆方向にイベントが伝わるイベントバブリング（Event Bubbling）とは正反対の動作になります。なお、DOMにおけるイベント伝播は「キャプチャフェーズ」「ターゲットフェーズ」「バブリングフェーズ」の3段階に分かれており、イベントキャプチャはその最初の段階に相当します。windowやdocumentなどの上位ノードから順に、下位ノードへとイベントが降りていくイメージです。