【JavaScript】addEventListenerの基本的な書き方

addEventListener

JavaScriptのイベントはページが読み込まれたりボタンをクリックしたりカーソルが要素の上に乗ったなどといった時に発生しますが、それらのイベント処理をaddEventListenerで発生させます。

addEventListenerの記述方法

obj.addEventListener(イベントタイプ, 関数, オプション);

addEventListenerの引数は3つあり、第１引数に指定したイベントによって第２引数で指定した関数が実行されます。

1. 第１引数はイベントタイプを指定。ロードイベントやクリックイベントなど。ここで指定するイベントタイプはイベントハンドラの書き方とは少し違いますので書き方には注意してください。【JavaScript】入門2. イベント処理
2. 第2引数ではイベントを発生させる関数を指定。
3. 第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

removeEventListenerの記述方法

addEventListenerと逆の「removeEventListener」というメソッドもあります。addEventListenerと同じく引数も3つあり、第１引数に指定したイベントによって第２引数で指定した関数が実行され、登録されているイベントをなくします。

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

addEventListenerの直後にremoveEventListenerが実行されたためのhoge3()のアラートは表示されませんでした。

関連リンク

JavaScript入門
jQuery入門