DOMレベル２のイベント処理
DOM0レベルのイベントモデルでは、イベントが発生した要素に対してイベントハンドラで命令が実行されますが、そしてそれ以上には何もありません。
DOMレベル２のイベントではこれと少し違ってきます。
イベントが発生した要素に対してイベントハンドラで命令が実行されます。ここまではDOM0レベルのイベントと同じです。DOMレベル２のイベントではイベントの伝播（でんぱ）が行われます。
イベントの伝播
イベントの伝播には3つの段階があります。
キャプチャリング
Documentオブジェクトからドキュメントツリーを下ってターゲットノードにイベント伝播していきます。
ターゲット
ターゲットノード自信に登録したイベントハンドラが実行されます。DOM0のイベントと同様の振る舞いです。
バブリング
イベントがターゲットノードからDocumentオブジェクトまで階層構造を上って伝播します。その様が泡が浮き上がるようだからバブリングです。
この仕組みを知らないでDOMレベル２のイベントを使用すると思わぬ結果を招くことになります。
更に重要なポイントがあります。DOMレベル０モデルではある特定のオブジェクトの特定の種類のイベントに対しては、イベントハンドラは１つしか登録できません。けれどもDOM2のイベントモデルではある特定のオブジェクトのある特定の種類のイベントに対して複数のイベントハンドラを登録することができます。
DOM2レベルのイベントモデルにイベントハンドラを設定するにはaddEventListener()を使用します。
これの使い方は以前に書いていますので参照してください。
JavaScriptのaddEventListenerについて
