リスナー

イベントリスナー (DOM)

[4] イベントリスナー (event listener) は特定のイベントコールバックを関連付けるものです >>3

[27] イベントハンドラーとは異なります。イベントハンドラーは、 イベントリスナーの特殊形です。

仕様書

状態

[5] イベントリスナーは、次のもので構成されます。

イベント型 (event type) >>3
コールバックを呼び出すべきイベント型です。文字列で1つだけ指定できます。
コールバック (callback) >>3
実際に呼び出されるコールバック関数です。 EventListener に相当する JavaScript 関数オブジェクトか、 イベントハンドラーラッパーに当たるイベントハンドラー処理アルゴリズム関数のいずれかです。
捕獲 (capture) >>3
コールバック捕獲段階で呼び出すべきならbubble 段階で呼び出すべきならのフラグです。
受動的 (passive)
イベント取消する可能性があるかどうかを指定します。 利用者エージェントはこの情報を処理の最適化のために使うことができます。
一度のみ
一度実行した後に削除されるべきかどうかを指定します。
削除済みフラグ (removed flag) >>3
removeEventListener で削除されたかどうかを表します。

辞書

[32] EventListenerOptions >>3 は、 addEventListenerremoveEventListenerイベントリスナーの指定に補助的に用いる辞書です。 次のメンバーがあります。

capture
捕獲を指定する boolean の値です。

[33] AddEventListenerOptions は、 addEventListenerイベントリスナーの指定に補助的に用いる辞書です。 EventListenerOptions継承しています >>3。 次の追加のメンバーがあります。

passive
受動的を指定する boolean の値です。
once
一度のみを指定する boolean の値です。

EventListener

[6] callback interface である EventListener は、イベントリスナーとして登録するコールバックのためのインターフェイスです。

[7] JavaScript では Function を直接コールバックとして使うことができます。

[28] JavaScript ではほとんどすべての場合、この形が採られます。

[8] オブジェクトコールバックとして使う言語束縛では、 handleEvent メソッドを持ったオブジェクトとする必要があります。

[9] いずれにせよ、コールバックには Event が1つ引数として引き渡されます。

[10] DOM2DOM3 初期は WebIDL を使っていなかったので、通常の interface として定義されていました。そのため >>8 のようになっています。

[53] なおこの handleEvent という演算名は、 他のコールバックインターフェイスにも踏襲されていました。

[11] この EventListener>>5イベント・リスナーの定義におけるコールバックとして使われることになります。 EventListener 自体はイベント・リスナーでないことになりますが、 この用語のずれは歴史的経緯によるもの >>3 と説明されています。

例外

[23] イベントリスナー内部で発生し捕捉されていない例外があった場合、 Webブラウザー例外を報告します >>22

[24] 例外を報告してもディスパッチの処理は継続されます。 他のイベントリスナーの処理は影響を受けません。

イベントリスナーリスト

[26] イベント対象オブジェクトは、イベントリスナーリスト (event listener list) >>3 を持ちます。 addEventListener によってここにイベントリスナーを追加したり、 removeEventListener によりここから削除したりできます。

[51] 次の演算があります。

[52] イベントリスナー演算

[60] 含まれているイベントリスナーの一覧を取得したり、 含まれているかチェックしたりはできません。 DOM3イベントで提案されていましたが、用途がないとして削除されました。

イベントリスナーによる動作の変化

[13] イベントリスナーによって Webブラウザーの挙動が変化することがあります。 例えばデバイスの動作に関するイベントは、当該イベントリスナーが一つも登録されていなければ、 発火してもしなくても変わらないので、発火しないことによって電力消費や処理時間を節約できるかもしれません。 このような文書からも利用者からもまったく観測できない変化は別として、 次のような利用者から観測可能な変化が規定されています。

[21] 著者からは観測できません。
[29] passive も参照。

[40] 著者からも利用者からも直接は観測できない (もしかすると利用者からは何らかの表示で観測できるかもしれない) ものの例としては、次のものがあります。

関連

[12] イベントハンドラーも参照。

歴史

[18] IRC logs: freenode / #whatwg / 20140409 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20140409

EventListenerOptions

[35] EventListenerOptions ( 版) http://rbyers.github.io/EventListenerOptions/EventListenerOptions.html

[36] [whatwg] DOM Events Proposal: EventListenerOptions 'mayCancel' for improved scroll performance (Rick Byers 著, 版) https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Jul/0018.html

[30] Define that event listener capture/passive fields default to false · whatwg/dom@1ff10ba ( 版) https://github.com/whatwg/dom/commit/1ff10baeafd55e4b4877d642ca8658e11e60d10b

[31] Enable an event listener to be invoked just once · whatwg/dom@e002d78 ( 版) https://github.com/whatwg/dom/commit/e002d7811533e276c9927b237748c4e170f4cb10

[34] Remove passive as event listener key · whatwg/dom@a13a3c7 ( 版) https://github.com/whatwg/dom/commit/a13a3c7fc14732691b50c51316b16de0915a61f2

[37] Editorial: define defaults for EventListenerOptions · whatwg/dom@2185b63 ( 版) https://github.com/whatwg/dom/commit/2185b636b7c12cb338f527e9ec8ab7c7d0554d26

[38] EventListenerOptions and passive event listeners - move to WICG? - APIs - WICG () https://discourse.wicg.io/t/eventlisteneroptions-and-passive-event-listeners-move-to-wicg/1386

[39] Align upload event dispatch with implementations (annevk著, ) https://github.com/whatwg/xhr/commit/667d4f3604aaee4e24bde33ed487cf8a98274e70

[43] Editorial: add note about event listeners causing preflight (sideshowbarker著, ) https://github.com/whatwg/xhr/commit/b1fd4d2d85be818adeb38a283e33b23a7152c170

[44] Editorial: simplify EventListenerOptions processing (annevk著, ) https://github.com/whatwg/dom/commit/cd3bcaeea40b4b9355ae7be3a5799813faa492fc

[45] Editorial: simplify EventListenerOptions processing by annevk · Pull Request #492 · whatwg/dom () https://github.com/whatwg/dom/pull/492

[46] Editorial: add "add an event listener" hook (annevk著, ) https://github.com/whatwg/dom/commit/2bdabb15de8112d9783cf393a3d6c37911149f77

[47] Editorial: add "add an event listener" hook by annevk · Pull Request #596 · whatwg/dom () https://github.com/whatwg/dom/pull/596

[48] Make event handlers share a code path with addEventListener() (annevk著, ) https://github.com/whatwg/html/commit/9a2a66cd8f8ddfa4c35d784bcda5c080e82aad38

[49] Array.prototype.flatMap & Array.prototype.flatten () https://tc39.github.io/proposal-flatMap/

[50] #SmooshGate FAQ  |  Web  |  Google Developers () https://developers.google.com/web/updates/2018/03/smooshgate