O'REILLYの"JavaScript"を読む 第17章 イベントとイベント処理 2回目

DOMレベル2の高度なイベント処理

DOMレベル0のイベントは全てのJavaScriptでサポートされるいわゆる標準のAPI。それに対し、DOMレベル2のイベント処理では高度なイベント処理用のAPIが定義されている。

イベント伝搬

レベル0イベントモデルでは、イベントが発生した要素に対してブラウザがイベントをディスパッチし、そのオブジェクトに対して適切なイベントハンドラが定義されていればハンドラが実行される、というだけだが、DOMレベル2ではあるドキュメント要素でイベントが発生したとき、イベントターゲットのハンドラが呼び出され、更にターゲットの祖先要素にもイベント処理機会がある。

キャプチャリング

Documentオブジェクトからドキュメントツリーを下って、ターゲットノードにイベントが伝搬する段階。ターゲットの先祖要素がキャプチャリング用のイベントハンドラを登録していたらこの段階で処理される。

ターゲットノードでのイベント処理

イベントがターゲットノードまで伝搬すると、ターゲットノードに登録されたイベントハンドラが実行される。

バブリング

イベントがターゲットノードまで伝搬した後、ターゲットノードのイベントハンドラが実行されると次の段階ではターゲットノードからDocumentオブジェクトまでドキュメントの階層構造を伝搬する。キャプチャリングと違い、バブリングは全てのイベントで処理されるわけではない。例えばsubmitイベントの場合、

要素を超えてドキュメントまで伝搬させても意味が無い。

イベント伝搬の停止

イベント伝搬中に任意のイベントハンドラでイベントの伝播を中断することができる。停止するにはEventオブジェクトのstopPropagation()メソッドを呼び出す。

イベントハンドラの登録

ある要素に対してイベントハンドラを登録するにはaddEventListener()を呼ぶ

document.myform.addEventListener("submit",   function(e){return validate(e.target);},   false);

第一引数はイベントタイプ、第二引数はリスナー関数、第三引数はイベント伝搬のどの段階で処理をするかというbool値。trueの場合はキャプチャリング段階で処理され、falseの場合はバブリング段階で処理される。
addEventListenerを複数回呼び出すことで、同じオブジェクトの同じイベントに対して複数のハンドラを登録することができる。登録されたイベントハンドラはイベント発生時に全て呼ばれるが、呼ばれる順番については保証されない(登録順に呼ばれるというわけではない)。