イベントリスナー
イベントリスナーは、指定されたタイプのイベントが発生したに通知を受け取るオブジェクトのことです。言い換えると、EventListener インターフェースで実装されたオブジェクト、または JavaScript の関数です。
イベントリスナーを登録するには、２つの方法があります。
イベントリスナーを登録するための古い方法
この方法は、古いと言っても DOM 0 の一部分ですから、広くサポートされていてクロスブラウザコードも必要ありません。addEventListener の機能が必要ではない場合、普通に使われています。
この例では、Web ページ読み込み終了時のイベントリスナーは関数式を使う方法で、 el エレメントの click イベントリスナーは、関数へのリファレンスを利用する方法で、登録しています。
古い方法
...関数 modifyText で実行する内容...
}
// 関数式を利用する方法
window.onload = function(){
var el = document.getElementById("ターゲット id 名");
//関数へのリファレンスを利用する方法—'()' は無い
el.onclick = modifyText;
}
JavaScript を実行するタイミング
JavaScript では、実行される位置より後に id を指定した場合、getElementById() で要素を取得できません。そのため、HTML の id を指定した後ろに記述すか、window（Web ページ） の読み込みが終わったタイミングで実行する必要があります。。
本サイトでは、JavaScript を外部ファイルに記述することを推奨していますので、window.onload を利用して getElementById() を実行しています。これで、id の位置とは無関係に、外部ファイルでも getElementById() を利用することができます。
addEventListener と attachEvent
addEventListener() は、DOM 2 Events 仕様から導入されました。イベントターゲット（target）にイベントリスナー（listener）を登録します。type は、イベントタイプでuseCapture は、キャブチャ使用の有無です。
addEventListener() をつかうと、古い方法では無理だった1つのイベントに対し複数のメソッドを登録することができます。また、キャプチャとバブリングの動きを細かくコントロールすることができます。
次の書式になります。
キャブチャは、イベント伝播方向のことです。ブラウザ上では、例えばマウスがクリックされるとイベントは、<html> → <body> → … → クリックされた target へと伝播されていきます。target よりも、上の階層でイベントリスナーがセットされていると、そのイベントリスナーもキャッチ（実行）され困ることがあります。その伝播を止める為に、通常は、useCapture に false をセットします。true をセットすれば、キャプチャされます。
キャプチャと反対方向のイベント伝播は、バブリング（bubbling）と呼ばれます。useCapture に false をセットすると、自動的にバブリングが発生します。これは、target から上の階層へと順番にイベントが伝播します。したがって、上の階層にイベントリスナーがセットされている場合は、イベント発生元の階層から上の階層にセットされているオブジェクト又は関数が実行されます。問題がある場合は、バブリングを止める手段もあります。
addEventListener() は、残念ながら IE ではサポートされていません。IE でも使用するためには、attachEvent を使い次のように利用します。前述した古い方法と同じ内容を書き直してみました。
addEventListener を使った方法
...関数 modifyText で実行する内容...
}
//ターゲット id 名 にイベントリスナーセット
function setListener(){
var el = document.getElementById("ターゲット id 名");
//関数へのリファレンスを利用する方法—'()' は無い
addListener(el,'click',modifyText,false);
}
//IE でも使えるようにしたイベントリスナー関数
function addListener(target,type,listener,useCapture) {
if (target.addEventListener){
target.addEventListener(type,listener,useCapture);
} else if (target.attachEvent){
target.attachEvent('on' + type,listener);
}
}
//Web ページがロードされたとき実行
addListener(window,'load',setListener,false);
IE でも使えるように addListener() 関数を作りました。addListener() で Web ページがロードされたときに、setListener() 関数を呼び、その中で再び addListener() を使い、ターゲット id に、イベントリスナーをセットしました。
古い方法に比べかなり冗長に見えますが、後は addListener() 関数を有効に利用することができます。正常に動くことは確認していますので、利点を理解して、お使いください。
