前回は、HTMLをJavaScriptから操作するときに用いる形式であるDOMについてまとめた。ここでは、要素を取得しイベントハンドラを登録するといったイベントの処理について解説する。
１ イベントドリブンプログラミング
イベントドリブンプログラミングでは、あるイベントに対してどのような処理をするのか登録していく。そしてブラウザがイベントを起こすたびにその登録した処理が実行される。登録する処理のことをイベントハンドラあるいはイベントリスナと呼ぶ。
２ イベントハンドラ／イベントリスナの設定
イベントハンドラまたはイベントリスナとは、イベントに対する処理である。イベントハンドラとイベントリスナの違いはその設定方法にある。また設定方法の違いに起因して、イベントハンドラは1つの要素・イベントについて1つしか設定できない。それに対して、イベントリスナは複数設定できる。イベントに対する処理の設定方法を以下に述べる。
- HTML要素の属性に指定する（イベントハンドラ）
- DOM要素のプロパティに指定する（イベントハンドラ）
- EventTarget.addEventListener()を利用する（イベントリスナ）
HTML要素の属性に指定する
イベントハンドラを設定する最も単純な方法は、HTMLの属性として指定することである。この方法の利点は、ロードされた時点で確実にイベントハンドラが設定されている。
DOM要素のプロパティに指定する
イベントハンドラはノードのプロパティに設定できる。プロパティを設定すると、HTMLタグの属性に記述したものは上書きされる。
EventTarget.addEventListener()を利用する
- イベントリスナの登録：ある要素のあるイベントに対して1つの処理しか設定できない欠点を補うためにEventTarget.addEventListener()を使う
- イベントリスナの実行順序：addEventListener()メソッドを使うと、特定の要素の特定のイベントに対して複数のイベントリスナを設定できる
- イベントリスナオブジェクト：ブラウザによってはhandleEvent()メソッドを実装したオブジェクトを指定することもできる
イベントハンドラ／イベントリスナ内でのthis
イベントハンドラ内でのthisが参照するオブジェクトは、イベントハンドラを設定した要素自身になる。
３ イベント発火
イベントは主にユーザの操作が引き金となって発生する。ユーザがWebページを閲覧している際に最も多く発生するイベントはmousemoveイベントである。これはマウスポイントが動いている間中発生し続ける。
４ イベントの伝播
HTMLドキュメントをWebブラウザ上で表示した場合はHTML要素が入れ子になって表示されている。このときイベントはキャプチャリングフェーズ、ターゲットフェーズ、バブリングフェーズという3つのフェーズに分かれて処理される。
キャプチャリングフェーズ
Windowオブジェクトからはじまり、DOMツリーを下にたどってイベントが伝播していくフェーズである。
ターゲットフェーズ
イベントターゲットに登録されているイベントリスナ実行されるフェーズである。
バブリングフェーズ
イベントターゲットからDOMツリーを上にたどっていくフェーズである。最後にはWindowオブジェクトまでイベントが伝播される。
キャンセル
- 伝播のキャンセル：イベントリスナ内でEvent.stopPropagation()メソッドを実行する。また、他のイベントリスナの実行を中止させるstopImmediatePropagation()メソッドがDOM Level 3で導入された
- 標準処理のキャンセル：Event.preventDefault()メソッドを使う
５ イベントが持つ要素
イベントリスナ/イベントハンドラには発生したイベント自体が引数として渡される。したがってイベントリスナでは発生したイベントの種類やイベントが発生したノードによって処理を分岐できる。
６ 標準イベント
DOM Level 2で定義されているイベント
DOM Level 2で定義されているイベントタイプは以下の4つの分類で定義されている。
- HTMLEvent
- MouseEvent
- UIEvent
- MutationEvent
DOM Level 3で定義されているイベント
DOM Level 3で定義されているイベントタイプは以下の9つの分類で定義されている。
- UIEvent
- FocusEvent
- MouseEvent
- WheelEvent
- TextEvent
- KeyboardEvent
- CompositionEvent
- MutationEvent（非推奨）
- MutationNameEvent（非推奨）
７ 独自イベント
標準として定義されているイベント以外に、独自でイベントを定義して発火可能である。この場合、createEvent()メソッドでイベントオブジェクトを生成し、そのイベントオブジェクトを対象となるノードのdispatchEvent()メソッドでディスパッチする。
最後に
一般的なGUIアプリケーションと同じくWebアプリにおいてもイベントドリブンプログラミングで挙動を実装する。イベントドリブンプログラミングでは、あるイベントに対してどのような処理をするのかを登録していく（イベントハンドラ／イベントリスナ）。このように、JavaScriptで様々な機能を実現するためには適切にイベントを取り扱うことが不可欠である。
次回は、スタイル、AJAX、フォーム 実践クライアントサイドJavaScriptについて解説する。
 |
