[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 は、 addEventListener と removeEventListener でイベントリスナーの指定に補助的に用いる辞書です。 次のメンバーがあります。

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] DOM2 や DOM3 初期は 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 も参照。
  • [14] unstyled document の定義
    • イベント・リスナーが登録されていれば、 unstyled document view は使われません。
  • [15] bfcache の利用可能性
  • [16] EventSource のごみ収集
  • [17] WebSocketのごみ収集
  • [19] Notification のごみ収集
    • [20] Notifications API Standard ( 版) http://notifications.spec.whatwg.org/#garbage-collection
  • [42] BroadcastChannel のごみ収集
  • サービスワーカーを走らせる処理
  • 文書のunload

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

  • [41] 必要な場合のみ、センサーを動作させる
    • deviceorientation, deviceorientationabsolute
    • devicemotion

関連

[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