addEventListener()JavaScript入門

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("関数１が呼び出されました"); }
function fnc2(){ alert("関数２が呼び出されました"); }

obj.onclick = fnc2;
</script>

＜サンプル＞

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

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

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

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

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

DOM要素.addEventListener( イベント , 処理 , false )

１番目の引数には、追加するイベントを指定します。

２つ目の引数は、主に関数を指定、若しくは直接関数を記述します。

３つ目はイベントの伝播形式を指定しますが、取り敢えず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("イベント３の追加")
} , false );
</script>

＜サンプル＞

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

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

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

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

関数を直接記述する

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

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

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