JavaScriptイベントハンドラ／イベントリスナの違い

よこのじ（@yokonoji_work）です。

JavaScript関連の情報を読んでいるとイベントハンドラとイベントリスナという似たワードが出てきますね。そして、clickだったりonclickだったりと記述にも若干の違いがあります。イベントハンドラとイベントリスナの違いをはっきりと理解しておかないと混乱のもとになりますので、きちんと整理しておきたいところです。

イベントハンドラとイベントリスナの違い
1. 挙動の違い
イベントの一覧

イベントハンドラとイベントリスナの違い

JavaScriptは、ユーザーの何らかの操作（＝イベント）をトリガーとして処理を実行するプログラミング言語です。イベントハンドラとイベントリスナという似た語句が説明の中で登場するので少しややこしく感じますが、どちらも処理を実行させるためのイベントを設定するものです。

イベントハンドラ（Event handler）とは、マウスクリック（onclick）のような操作と処理を結びつけるための命令のことです。

リンクの上にマウスポインタが乗った、またはボタンがクリックされた、テキストボックスの内容が変更された、フォームの内容が送信されようとする、など、ユーザーが行う様々な操作に対して特定の処理を行わせる。イベントに応じて適切に設定された処理は、Webページをより動的・対話的なものにする。

イベントの発生源となるボタンやリンクは、オブジェクトと呼ばれる。イベントハンドラは、そのオブジェクトに対応するタグのイベント属性の値として記述される。

IT用語辞典バイナリ

その中で、より柔軟にイベント検出と処理の実行をさせるための仕組みとして用意されているのが、イベントリスナ（Event Listener）です。addEventListener()メソッドを使用した記述はこれに当たります。

イベントハンドラはon…属性またはプロパティを介して登録された関数を参照します
イベントリスナーは、EventTarget.addEventListener()によって登録された関数またはオブジェクトを参照します

挙動の違い

それでは、addEventListener()メソッドを使用した場合とそうでない場合でどのような違いがあるのかを確認します。どちらもイベントと処理を結びつけるという点では同じですが、細かく見るとその挙動が異なります。

addEventListener()メソッドには「同じ要素に複数のイベントハンドラを設定できる」という特徴があります。

次の例では、abcというidを持つ要素でclickイベントが発生したときにmyFunction関数とotherFunction関数を実行しています。この場合、アラートダイアログが2つ出現します。

<script>
  function myFunction() {
    alert ("Hello World");
  }
  function otherFunction() {
    alert ("Other World");
  }

  var p = document.getElementById("abc");
  p.addEventListener("click", myFunction);
  p.addEventListener("click", otherFunction);
</script>

これはaddEventListener()メソッドを使っているから可能なことです。addEventListener()を使わない記述で複数の関数を呼んだ場合は、上書きされてしまい最後に記述した処理しか実行されません。

<script>
  function myFunction() {
    alert ("Hello World");
  }
  function otherFunction() {
    alert ("Other World");
  }

  var p2 = document.getElementById("b");
  p2.onclick = myFunction;
  p2.onclick = otherFunction;
</script>

この場合は、otherFunctionと表示されるアラートダイアログが出現するだけです。

その他、addEventListener()で設定したイベントと処理の紐づけは、removeEventListener()メソッドを使うことで削除することが可能です。

<script>
  function myFunction() {
    alert ("Hello World");
  }
  function otherFunction() {
    alert ("Other World");
  }

  var p = document.getElementById("a");
  p.addEventListener("click", myFunction);
  p.addEventListener("click", otherFunction);

  var sakujo = document.getElementById("sj");
  sakujo.onclick = function () {
    p.removeEventListener("click", myFunction);
  }
</script>

この例では、sjというidを持つ要素をクリックした時にremoveEventListenerでイベントリスナを削除します。削除されるとp.addEventListener(“click”, myFunction);によるクリックとmyFunctionの結びつきは解除されて再びpオブジェクトをクリックしてもmyFunctionは実行されません。

このように、イベントリスナは柔軟にイベントと処理の実行を扱うことができるのです。