DOM方式のイベント処理：addEventListener()

従来のイベント処理方法は問題があった。同じ要素に同じイベントハンドラを複数定義できない。　それは同じ要素に同じイベントハンドラを複数定義すると、後から定義したもので上書きされてしまうからです。
そこで、W3C DOM Level 3で新しいイベント処理法が定義された。

■addEventListener()　イベント登録用メソッド
(書式)　オブジェクト名.addEventListener(type, fnc, Capture)
　(引数）
　　　type ･･･発生させるイベントのタイプ。イベント名。イベントハンドラ名から"on"を取った値　load、clickなど
　　　fnc　･･･イベントが発生したとき実行する関数
　　　Capture　･･･イベントのキャプチャの有無（true/false）。通常はfalseを指定しておく

　（IE8までは未対応、IE9でようやく対応）

addEventListener()　のSample

　

同じScriptを記述しているが、[Click 1]は実行され、[Click 2]のほうは無反応。ソースを見てもらえば解るが、同じwindow.onloadイベントハンドラが重複している。そのため、最初のwindow.onloadは二度目のwindow.onloadによって上書きされてしまい実行されない。
同じ要素オブジェクト（この場合はwindow）に同じイベントハンドラ（この場合onload）を重複して使えないのです。