[JavaScript General] イベントハンドラ と イベントリスナ

用語の整理。

イベントドリブンモデル

以下より引用。

JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで
山田 祥寛
技術評論社
売り上げランキング: 16,205

Client Side JavaScript では、ブラウザ上で発生したイベントに応じて実行するコードを記述するのが特徴。
このプログラミングモデルのことを、イベントドリブンモデルという。
またこのとき、イベントに対応してその処理内容を定義するコードの塊(関数)のことをイベントハンドラという。

イベント

event – Web API インターフェイス | MDN

DOM要素にイベントハンドラを登録する方法は3つあるが、EventTarget.addEventListener を利用する方法が現代的な実装である。

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

第1回 JavaScriptの基礎を見直す:聞いたら一生の宝、プログラミングの基礎の基礎 |gihyo.jp … 技術評論社

イベントとは、ブラウザ上などで発生したアクション全般を指す。
イベントハンドラとイベントリスナについて、W3Cでは以下のように記述、

  • イベントハンドラ: イベントを捕捉し処理する関数。
  • イベントリスナ: そのハンドラ関数を処理する仕組み。

エンジニアは以下の様な概念での使い分けを行っている。

  • イベントハンドラ: イベントに対して紐付けられる処理
  • イベントリスナ: イベントにイベントハンドラを紐付ける仕組み

EventTarget.addEventListener

以下より引用。

EventTarget.addEventListener – Web API インターフェイス | MDN
addEventListener は、 1 つのイベントターゲットにイベントリスナーを 1 つ登録します。イベントターゲットは、ドキュメント上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、XMLHttpRequest です。

addEventListener は、W3C DOM で仕様化された、イベントリスナーを登録するための方法です。その利点は以下の通りです。

  • イベントに 1 つ以上のハンドラを追加することができます。これは、特に、他のライブラリ/拡張で利用しても上手く動作する必要がある DHTML ライブラリや Mozilla の拡張 のために役立ちます。
  • リスナーがアクティブ化されたときに、その動きを細かくコントロールすることを可能にします(キャプチャリング 対 バブリング)。
  • HTML 要素だけでなく、任意の DOM 要素 で動作します。

See the Pen JavaScript Event listener by DriftwoodJP (@DriftwoodJP) on CodePen.

removeEventListener は、イベントターゲットからイベントリスナーを削除します。

イベントを発生させたオブジェクトへの参照します。

イベントを発生させたマウスのボタンを示しています。

現在のイベントのさらなる伝播 (propagation) を止めます。

Prevents other listeners of the same event from being called.

イベントがキャンセル可能である場合、上位ノードへのイベントの 伝播 (propagation) を止めずに、そのイベントをキャンセルします。

参考

機能テスト

JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで」より引用。
if (element.attachEvent)... とすれば、ブラウザがそのメソッドに対応しているかどうかを判断できる。
その機能に直接アクセスして判定することから、 機能テスト と呼ばれる。
ブラウザ毎の仕様差を吸収する際によく利用される手法。

Can I use… Support tables for HTML5, CSS3, etc
クロスブラウザ対応の例。

See the Pen JavaScript Cross-browser event listener by DriftwoodJP (@DriftwoodJP) on CodePen.