DOM イベントの完全ガイド。この記事を読めば十分です。
DOMイベントとは、ウェブページの特定の要素が特定のイベントが発生したときにトリガーされる動作または関数のことをいいます。DOMイベントは、ユーザーの操作イベント（クリック、マウスの移動、キーボードの入力など）と、ブラウザーのイベント（ページの読み込み、ドキュメントの準備完了など）の両方があります。この記事では、イベントの仕組み、イベントの種類、イベントの処理方法など、DOMイベントについて詳しく説明します。
1. 事件メカニズム
- 事件の発端
DOMイベントの発生は2つの種類に分けられます。ユーザーインタラクションイベントとブラウザイベントです。ユーザーインタラクションイベントは、ユーザーがページとやり取りすることでトリガーされるイベントであり、クリック、マウスの移動、キーボード入力などが含まれます。ブラウザイベントは、ブラウザの特定の状態または操作によってトリガーされるイベントであり、ページの読み込み、ドキュメントの準備完了などが含まれます。
- イベントのバブリングとキャプチャ
イベントバブリングとは、要素でイベントが発生したとき、その要素から親要素へ順次発生したイベントを伝播させることをいいます。イベントキャプチャとは、要素でイベントが発生したとき、もっとも外側の祖先要素から子孫要素へ順次発生したイベントを伝播させることをいいます。イベントバブリングとイベントキャプチャは、DOMイベントの2つのフェーズです。
- イベントの伝搬と既定の動作を止める
イベントハンドラ内で、イベント.stopPropagation ()メソッドを呼び出すと、イベントの伝搬を停止して、親要素の同じイベントがトリガーされるのを防ぐことができます。イベント.preventDefault ()メソッドを呼び出すことで、リンクのクリック時におけるページの遷移などのイベントの既定の動作を停止できます。
事件の種類
- マウスイベント
マウスのクリック、ダブルクリック、右クリック、マウスの移動、マウスのスクロールなどのマウスイベントを発生させる。これらのマウスイベントに対応するには、対応するイベントハンドラをバインドする必要がある。
- キーボードイベント
キーボードイベントには、キーを押す事、キーを離す事などが含まれ、それらに対応したイベントハンドラーを設定することで、キーボードイベントへの対応が可能です。
- フォームイベント
フォームイベントには、フォーム送信、入力ボックスのフォーカス獲得、入力ボックスのフォーカス喪失などが含まれます。これらのフォームイベントへの応答は、対応するイベント処理ルーティンをバインドすることで可能です。
- ドキュメントロードイベント
ページ読み込み完了時や DOM が構築完了時など、ドキュメントの読み込みイベントにはさまざまな種類があります。これらのドキュメント読み込みイベントに応答するには、対応するイベントハンドラを関連付けることができます。
３、インシデントハンドラ
- HTMLイベントハンドラ
HTMLタグに、例えばのように、onclickなどの属性を追加することでイベントハンドラを指定できます。この方法はシンプルで分かりやすいですが、保守性や拡張性に劣ります。
- DOM0イベントハンドラ
イベントハンドラは、要素のイベント属性に値を設定することで指定することができる（例：element.onclick = function() { … }）。この方法は比較的シンプルだが、イベントハンドラを1つしかバインドできない。
- DOM2 レベルイベントハンドラー
addEventListenerメソッドでイベントハンドラーを指定できます。例: element.addEventListener(‘click’, function() { … })。この方法は、複数のイベントハンドラーをバインドでき、キャプチャフェーズまたはバブリングフェーズでイベントを処理できます。
- IEイベントハンドラ
IE ブラウザーでは attachEvent メソッドでイベントハンドラを指定します。例えば element.attachEvent(‘onclick’, function() { … }) です。この方法は DOM2 レベルのイベントハンドラに似ていますが、イベントハンドラは 1 つしかバインドできません。
まとめ:
DOMイベントについて総合的に解説しています。イベントの仕組み、イベントの種類、イベントハンドラなどの側面をカバーしています。
