[JavaScript General] イベントハンドラ と イベントリスナ
用語の整理。
Contents
イベントドリブンモデル
以下より引用。
技術評論社
売り上げランキング: 16,205
Client Side JavaScript では、ブラウザ上で発生したイベントに応じて実行するコードを記述するのが特徴。
このプログラミングモデルのことを、イベントドリブンモデルという。
またこのとき、イベントに対応してその処理内容を定義するコードの塊（関数）のことをイベントハンドラという。
イベント
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・ｊQueryまで」より引用。
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.