イベントリスナーとイベントの動作の違い (addEventListener と on..... の動作の違い)

イベントリスナーとイベントの動作の違いを紹介します。

イベントリスナーとイベント

イベントリスナーはオブジェクトのaddEventListener()メソッドを呼び出し、イベントリスナーをオブジェクトに追加します。イベントはオブジェクトのonclickなどのイベントに関数を設定します。

イベントを利用した場合

コード

以下のコードを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    window.onload = function () {
      var button = document.getElementById("Button1");
      button.onclick = click_01;
      button.onclick = click_02;
      button.onclick = click_03;
    }

    function click_01() {
      var text = document.getElementById("Text1");
      text.value = "ボタンがクリックされました。";
    }
    function click_02() {
      var text = document.getElementById("output");
      text.innerHTML = "ボタンがクリックされました。";
    }
    function click_03() {
      window.top.document.title = "ボタンがクリックされました。";
    }

  </script>
</head>
<body>
  <input id="Button1" type="button" value="button" />
  <input id="Text1" type="text" />
  <div id="output"></div>
</body>
</html>

解説

イベントに関数を設定した場合は、代入となるため、上記のコードでは、onclickにはclick_03()の関数のみが設定されます。ボタンをクリックした際にもclick_03()関数のみが実行され、ウィンドウのタイトルのみにメッセージが表示されます。

補足

JavaScriptではC#のデリゲートのような以下の記述はできません。

  window.onload = function () {
    var button = document.getElementById("Button1");
    button.onclick += click_01;
    button.onclick += click_02;
    button.onclick += click_03;
  }

実行結果

HTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

[button]をクリックします。タイトルバー(タブのタイトル)の文字列が「ボタンがクリックされました。」に変化します。他の部分には変化がありません。

イベントリスナーを利用した場合

コード

以下のコードを記述します。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
    window.onload = function () {
      var button = document.getElementById("Button1");
      button.addEventListener('click', click_01, false);
      button.addEventListener('click', click_02, false);
      button.addEventListener('click', click_03, false);
    }

    function click_01() {
      var text = document.getElementById("Text1");
      text.value = "ボタンがクリックされました。";
    }
    function click_02() {
      var text = document.getElementById("output");
      text.innerHTML = "ボタンがクリックされました。";
    }
    function click_03() {
      window.top.document.title = "ボタンがクリックされました。";
    }

  </script>
</head>
<body>
  <input id="Button1" type="button" value="button" />
  <input id="Text1" type="text" />
  <div id="output"></div>
</body>
</html>

解説

イベントリスナーを利用した場合は、リスナー関数をオブジェクトに複数追加できるため、上記のコードでは、clickイベントにはclick_01(),click_02(),click_03()の3つの関数が設定されます。ボタンをクリックした際にはclick_01(),click_02(),click_03()の3つの関数が実行され、ウィンドウのタイトル、テキストボックス、DIV枠にメッセージが表示されます。