addEventListener()を使ったイベントリスナの登録方法を解説

HOME
更新日:2014.01.15
HOMEJavaScript入門 > addEventListener()

addEventListener()

前のページで見た方法では、同じイベントに対して処理を追加するということができません。 一番最後に指定したものが適用されます。処理を追加登録する場合は、addEventListener()を利用します。

DOM要素にイベントを指定すると上書きになる

下のサンプルをご覧下さい。HTMLのタグのonclick属性で関数fnc1を呼び出すようにしています。 そこにJavaScriptを使ってonclickイベントに関数fnc2を呼び出すよう記述しました。 果たして結果はどうなるでしょうか?

<form>
<input type="button" id="ev" value="イベント発動" onclick="fnc1()">
</form>

<script>
var obj = document.getElementById("ev");

function fnc1(){ alert("関数1が呼び出されました"); }
function fnc2(){ alert("関数2が呼び出されました"); }

obj.onclick = fnc2;
</script>

<サンプル>

サンプルのボタンを押すと分かるように、関数fnc2だけ呼び出されました。 つまり同じ要素の同じイベントに対しては、処理は追加ではなく上書きされることになります。

ではJavaScriptでイベント処理を追加するにはどうすればいいでしょうか。 addEventListener()を使えば追加が可能です。

イベント処理には、イベントハンドラとイベントリスナの2種類があります。 イベントハンドラは1つのイベントについて1つだけしか指定できませんが、 イベントリスナは複数設定できます。

addEventListener()によるイベントリスナの指定

最初にaddEventListener()はInternet Explorer 8以前のIEでは動かないことを記述しておきます。 これらに対応させる必要がある方はattachEvent()を使いますが、当サイトでは解説は割愛致します。

addEventListener()を使ってイベントリスナを追加するには、以下のようにします。

DOM要素.addEventListener( イベント , 処理 , false )
1番目の引数には、追加するイベントを指定します。
2つ目の引数は、主に関数を指定、若しくは直接関数を記述します。
3つ目はイベントの伝播形式を指定しますが、取り敢えずfalseにします。

実際にサンプルスクリプトを見てみましょう。 以下のサンプルでは、最初にボタンのonclick属性で関数fnc1を呼び出すようにしています。 次にaddEventListener()で関数fnc2を追加しました。 さらにもう一つ関数を追加しています。

<form>
<input type="button" id="ev2" value="イベント発動" onclick="fnc1()">
</form>

<script>
var obj2 = document.getElementById("ev2");

//既存の関数をイベントリスナに登録する
obj2.addEventListener( "click" , fnc2 , false );

//直接関数を記述して登録する
obj2.addEventListener( "click" , function () {
  alert("イベント3の追加")
} , false );
</script>

<サンプル>

上のボタンを押すと、3つのアラートが表示されると思います。 つまりclickイベントにイベントリスナを追加することができたのです。

関数をイベントリスナとして登録する

obj2.addEventListener( "click" , fnc2 , false );

既出の関数を追加するのは、第2引数に関数を指定するだけでOKです。 第一引数のイベントは「onclick」ではなく「click」であることに気をつけてください。

関数を直接記述する

obj2.addEventListener( "click" , function () {
  alert("イベント3の追加")
} , false );

上のように第2引数に直接関数を記述することができます。 関数名は必要ないので記述していません。 上記のサンプルではalert()でダイアログを出すようにしています。

もし上のサンプルで、関数形式にせず直接alert()を書くとどうなるでしょうか? ボタンを押す前、ページが読み込まれた時点でアラートダイアログが表示されてしまいます。