【JavaScript】addEventListenerの基本的な書き方
addEventListener
JavaScriptのイベントはページが読み込まれたりボタンをクリックしたりカーソルが要素の上に乗ったなどといった時に発生しますが、それらのイベント処理をaddEventListenerで発生させます。
addEventListenerの記述方法
obj.addEventListener(イベントタイプ, 関数, オプション);
addEventListenerの引数は3つあり、第1引数に指定したイベントによって第2引数で指定した関数が実行されます。
- 第1引数はイベントタイプを指定。ロードイベントやクリックイベントなど。ここで指定するイベントタイプはイベントハンドラの書き方とは少し違いますので書き方には注意してください。【JavaScript】入門2. イベント処理
- 第2引数ではイベントを発生させる関数を指定。
- 第3引数では「キャプチャリングフェーズ」 or 「バブリングフェーズ」のどちらでイベントを実行させるのかを真偽値で指定。初期値は「false」で「バブリングフェーズ」で実行されます。省略すると「false」と見なされます。
JavaScript
function hoge1(){
alert('whats up!');
}
function hoge2(){
alert('Just chilling!');
}
var e = document.getElementById('sample1');
e.addEventListener('click', hoge1, false);
e.addEventListener('click', hoge2, false);
click!をクリックすると関数hoge1()とhoge2()が実行されます。
Result
click
removeEventListenerの記述方法
addEventListenerと逆の「removeEventListener」というメソッドもあります。addEventListenerと同じく引数も3つあり、第1引数に指定したイベントによって第2引数で指定した関数が実行され、登録されているイベントをなくします。
obj.removeEventListener(イベントタイプ, 関数, オプション);
注意点として、二つ目の引数はaddEventListenerに渡した引数と同じ関数式である必要があります。
JavaScript
function hoge3(){
alert('pront!');
}
var e = document.getElementById('sample2');
e.addEventListener('click', hoge3, false);
e.removeEventListener('click', hoge3, false);
click!をクリックすると関数hoge3()が実行されます。
Result
click
addEventListenerの直後にremoveEventListenerが実行されたためのhoge3()のアラートは表示されませんでした。