イベントリスナについて(2)【JavaScript】

(1)に続き。

さっそく具体的なイベントリスナの使用例について見ていく。

eventListener

イベントリスナを使う上で注意しなければならないのは、クロスブラウザを意識してプログラムをくんでいかなくてはならないということである。IEと、IE以外のブラウザでメソッドが異なる。上の例では、addListener関数の定義部分(上の方)がそれに該当する。

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

IEの時は1、それ以外の時は2である。ブラウザに応じて対応させるために、if文を使って分岐させていく。　ここで注意点として、attachEventの時はonが付いた名前、addEventListenerの時はonがない名前とする。そして、addEventListenerはfalseで固定である。

ユーザ定義の関数addListener関数をつかって、listen関数とload,clickを結びつけるのである。

今回、僕が良いなと思ったのは(1)で言ったようなイベントリスナ自体の性質もあるのだが、他にもあって、それは<input>タグにイベントハンドラが直接入っていないということである。分離されていて管理もしやすいと感じた。ちなみに、document.getElementByIdは、該当の要素がロードされていなければ使えないので、イベントリスナを使わない場合は該当の要素の後にスクリプトを書かなくてはならないが、今回の例はイベントリスナによってそれを回避している。