[JavaScript General] イベントハンドラ と イベントリスナ
用語の整理。
[markdown]
## イベントドリブンモデル
以下より引用。
技術評論社
売り上げランキング: 16,205
Client Side JavaScript では、ブラウザ上で発生したイベントに応じて実行するコードを記述するのが特徴。
このプログラミングモデルのことを、イベントドリブンモデルという。
またこのとき、イベントに対応してその処理内容を定義するコードの塊（関数）のことをイベントハンドラという。
### イベント
> [event – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Event)
DOM要素にイベントハンドラを登録する方法は3つあるが、EventTarget.addEventListener を利用する方法が現代的な実装である。
### イベントハンドラとイベントリスナの違い
> [第1回 JavaScriptの基礎を見直す：聞いたら一生の宝、プログラミングの基礎の基礎 ｜gihyo.jp … 技術評論社](http://gihyo.jp/dev/serial/01/js-foundation/0001)
イベントとは、ブラウザ上などで発生したアクション全般を指す。
イベントハンドラとイベントリスナについて、W3Cでは以下のように記述、
– イベントハンドラ： イベントを捕捉し処理する関数。
– イベントリスナ： そのハンドラ関数を処理する仕組み。
エンジニアは以下の様な概念での使い分けを行っている。
– イベントハンドラ： イベントに対して紐付けられる処理
– イベントリスナ： イベントにイベントハンドラを紐付ける仕組み
## EventTarget.addEventListener
以下より引用。
> [EventTarget.addEventListener – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
addEventListener は、 1 つのイベントターゲットにイベントリスナーを 1 つ登録します。イベントターゲットは、ドキュメント上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、XMLHttpRequest です。
addEventListener は、W3C DOM で仕様化された、イベントリスナーを登録するための方法です。その利点は以下の通りです。
– イベントに 1 つ以上のハンドラを追加することができます。これは、特に、他のライブラリ/拡張で利用しても上手く動作する必要がある DHTML ライブラリや Mozilla の拡張 のために役立ちます。
– リスナーがアクティブ化されたときに、その動きを細かくコントロールすることを可能にします（キャプチャリング 対 バブリング）。
– HTML 要素だけでなく、任意の DOM 要素 で動作します。
See the Pen JavaScript Event listener by DriftwoodJP (@DriftwoodJP) on CodePen.
> * [EventTarget.removeEventListener – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/removeEventListener)
>
> removeEventListener は、イベントターゲットからイベントリスナーを削除します。
>
> * [Event.target – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Event/target)
>
> イベントを発生させたオブジェクトへの参照します。
>
> * [event.button – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Event/button)
>
> イベントを発生させたマウスのボタンを示しています。
>
> * [event.stopPropagation – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation)
>
> 現在のイベントのさらなる伝播 (propagation) を止めます。
>
> * [Event.stopImmediatePropagation() – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Event/stopImmediatePropagation)
>
> Prevents other listeners of the same event from being called.
>
> * [event.preventDefault – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/event/preventDefault)
>
> イベントがキャンセル可能である場合、上位ノードへのイベントの 伝播 (propagation) を止めずに、そのイベントをキャンセルします。
### 参考
> * [jQuery で特定のイベント処理を無効化・中断する | deadwood](https://www.d-wood.com/blog/2016/07/22_8324.html)
## 機能テスト
「JavaScript本格入門 ～モダンスタイルによる基礎からAjax・ｊQueryまで」より引用。
`if (element.attachEvent)…` とすれば、ブラウザがそのメソッドに対応しているかどうかを判断できる。
その機能に直接アクセスして判定することから、 __機能テスト__ と呼ばれる。
ブラウザ毎の仕様差を吸収する際によく利用される手法。
> [Can I use… Support tables for HTML5, CSS3, etc](http://caniuse.com/#feat=addeventlistener)
クロスブラウザ対応の例。
See the Pen JavaScript Cross-browser event listener by DriftwoodJP (@DriftwoodJP) on CodePen.
[/markdown]