イベントハンドラの代わりにイベントリスナーを使う

イベントハンドラをHTMLから分離して記述するという記事で書いた通り、
イベントハンドラの問題点として、同一の要素、同一のイベントに対して、複数のイベントハンドラをセットすることができないことが挙げられる。

そこでイベントリスナーを使う。

イベントリスナーの利点

1. 同一要素の同一イベントに対して、複数のイベントリスナーをセットすることができる。
2. 一度セットしたイベントリスナーを削除することができる。

イベントリスナーの書き方

IE

要素ノード.attachEvent(イベント名, イベントハンドラ)
※ただし今回はIEは考慮しない。

IE以外

要素ノード.addEventListner(イベント名, イベントハンドラ, イベントの伝達方向)

第一引数：イベント名 イベントハンドラ名から”on”をとったもの。 例：onclick => click
第二引数：イベントハンドラ（処理） addEventListnerに直接書くか、関数を呼び出す
第三引数：イベントの伝達方向。 クロスブラウザを考慮する場合には、false（バブリング方向）。

書いてみると以下のように。

同じことをイベントハンドラを使って比較してみる。