JavaScript はイベント駆動型言語であり、Web ブラウザ上で発生したイベント（マウスクリックなど）に応じて、指定した関数を呼び出すことがよくあります。このようなイベント処理を実現する仕組みとして、JavaScript では addEventListener() が用意されています。
addEventListener() の使い方
JavaScript でイベント処理を行う方法にはイベントハンドラを用いる方法があります。しかし、同一要素の同一イベントに複数の処理を登録しようとすると処理が上書きされてしまい、最後に登録した処理のみが実行されてしまいます。
このため、多くの場合では同一のイベントに複数の処理を登録することのできる addEventListener() が使われます。次の例を見てみましょう。
HTML
|
1 |
<p id="sample">ここをクリックするとHelloとByeをアラートする</p> |
JavaScript
|
1 2 3 4 5 6 7 8 9 |
function sayHello(){ alert("Hello!"); } function sayGoodbye(){ alert("Bye!"); } var p = document.getElementById('sample'); p.addEventListener('click', sayHello, false); p.addEventListener('click', sayGoodbye, false); |
このサンプルでは、pタグの要素をクリックすると、Hello! と Bye! という二つのアラートが表示されます。すなわち、同一要素の同一イベントに対して複数の処理を登録しています。
addEventListener() は以下のように記述します。
|
1 |
obj.addEventListener(イベントのタイプ, 関数, オプション); |
addEventListener()は、３つの引数を取ります。基本的な動作は、第１引数に指定したイベントが発生した際に、第２引数で指定した関数が実行されます。
第１引数は、イベントのタイプを指定します。例えば、クリックイベントであれば click となりますが、イベントハンドラとは名称が異なる部分があるので注意が必要です。
第２引数は、イベントが発生した際に実行する関数を指定します。イベントリスナとも呼ばれます。
第３引数は、キャプチャリングフェーズもしくはバブリングフェーズのどちらで実行するかを真偽値で指定します。初期値は false で、バブリングフェーズで実行されます。省略した場合は、falseと見なされます。
addEventListener() を使う上での注意点
addEventListener() は、InternetExplore8 以前では利用できません。
