Events
CustomEvent インターフェイスは、何らかの目的でアプリケーションから初期化されるイベントを表します。
Event CustomEvent
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 5 | 12 | 6 | 5 | 18 | 5 | |
| CustomEvent() コンストラクターは新しい CustomEvent を作成します。 | 15 | 12 | 11 | 6 | 18 | 6 |
| detail は CustomEvent インターフェイスの読み取り専用プロパティで、イベントを初期化する際に渡された何らかのデータを返します。 | 5 | 12 | 6 | 5 | 18 | 5 |
worker_support 労働者で利用可能 | 43 | 17 | 48 | 12 | 43 | 12 |
| Event インターフェイスは EventTarget で発生するイベントを表します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| bubbles は Event インターフェイスの読み取り専用プロパティで、イベントが DOM ツリーをバブリングするかしないかを示します。 | 1 | 12 | 1.5 | 1 | 18 | 1 |
| cancelable は Event インターフェイスの読み取り専用プロパティで、イベントがキャンセル可能かどうか、イベントが発生しないように抑止することができるかを示します。 | 1 | 12 | 1.5 | 1 | 18 | 1 |
| currentTarget は Event インターフェイスの読み取り専用プロパティで、イベントハンドラーが取り付けられた要素を識別します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| defaultPrevented は Event インターフェイスの読み取り専用プロパティで、 の呼び出しがイベントをキャンセルしたかどうかを示す値を論理値で返します。 | 5 | 12 | 6 | 5 | 18 | 5 |
| Event() コンストラクターは、新しい Event を生成します。この方法で作成されたイベントは合成イベントと呼ばれ、ブラウザーによって発行されたイベントとは対照的となっており、スクリプトから配信することができます。 | 15 | 12 | 11 | 6 | 18 | 6 |
| eventPhase は Event インターフェイスの読み取り専用プロパティは、イベントフローのどの段階が現在評価されているかを示します。 | 1 | 12 | 1.5 | 1 | 18 | 1 |
| isTrusted は Event インターフェイスの読み取り専用プロパティで、このイベントがユーザー操作によって生成された場合は true、このイベントがスクリプトで作成または変更されたり、 EventTarget.dispatchEvent() で配信されたりした場合は false となる論理値を返します。 | 46 | 12 | 1.5 | 10 | 46 | 10 |
| preventDefault() は Event インターフェイスのメソッドで、user agentに、このイベントが明示的に処理されない場合に、その既定のアクションを通常どおりに行うべきではないことを伝えます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| stopImmediatePropagation() は Event インターフェイスのメソッドで、呼び出されている同じイベントの他のリスナーを抑止します。 | 5 | 12 | 10 | 5 | 18 | 5 |
| stopPropagation() は Event インターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。しかし、これは既定の動作の発生を妨げるものではありません。例えば、リンクのクリックはまだ処理されます。これらの動作を止めたい場合は、Event.preventDefault メソッドを参照してください。また、現在の要素における他のイベントハンドラーへの伝搬も防げません。それらを止めたい場合は、Event.stopImmediatePropagation を参照してください。 | 1 | 12 | 1 | 1 | 18 | 1 |
| target は Event インターフェイスの読み取り専用プロパティで、イベントが配信されたオブジェクトへの参照です。これは、イベントのバブリングまたはキャプチャ段階でイベントハンドラーが呼び出されたときの Event.currentTarget とは異なります。 | 1 | 12 | 1 | 1 | 18 | 1 |
| timeStamp は Event インターフェイスの読み取り専用プロパティで、イベントが作成された時刻（ミリ秒単位）を返します。 | 1 | 12 | 1.5 | 1 | 18 | 1 |
| type は Event インターフェイスの読み取り専用プロパティで、イベントの種別を表す文字列を返します。イベントが構築されると設定され、この名前は click, load, error のような特定のイベントを参照するためによく使用されます。 | 1 | 12 | 1.5 | 1 | 18 | 1 |
| EventTarget インターフェイスは、イベントを受け取ることや、リスナーを持つことができるオブジェクトが実装します。 言い換えると、イベントのターゲットはすべて、このインターフェイスに関する 3 つのメソッドを実装しています。 | 1 | 12 | 1 | 1 | 18 | 1 |
| addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
addEventListener (options parameter) `options` オブジェクトを含むフォームに対応（下位互換性のため、3番目の引数は `options` または `Boolean` のいずれかでも可） | 49 | 16 | 49 | 10 | 49 | 10 |
addEventListener (options parameter options capture parameter) `options.capture` パラメータ | 49 | 16 | 49 | 10 | 49 | 10 |
addEventListener (options parameter options once parameter) `options.once` パラメータ | 55 | 16 | 50 | 10 | 55 | 10 |
addEventListener (options parameter options passive parameter) `options.passive` パラメータ | 51 | 16 | 49 | 10 | 51 | 10 |
addEventListener (options parameter options passive parameter default true touch) `touchstart` および `touchmove` イベントにおいて、`options.passive` パラメータのデフォルト値は `true` です | 55 | 79 | 61 | 11.1 | 55 | 11.3 |
addEventListener (options parameter options passive parameter default true wheel) `wheel` および `mousewheel` イベントでは、`options.passive` パラメータのデフォルト値は `true` です | 73 | 79 | 84 | | 73 | |
addEventListener (options parameter options signal parameter) `options.signal` パラメータ | 90 | 90 | 86 | 15 | 90 | 15 |
addEventListener (useCapture parameter optional) `useCapture` パラメータは省略可能です | 1 | 12 | 6 | 1 | 18 | 1 |
| dispatchEvent() は EventTarget のメソッドで、 Event をそのオブジェクトへ送り、関連するイベントリスナーを（同期的に）適切に起動させます。通常のイベント処理ルール（キャプチャとオプションのバブリングフェーズを含む）は dispatchEvent() で手動で配信されたイベントにも適用されます。 | 4 | 12 | 2 | 3.1 | 18 | 3 |
| EventTarget() コンストラクターは、新しい EventTarget オブジェクトのインスタンスを作成します。 | 64 | 79 | 59 | 14 | 64 | 14 |
| removeEventListener() は EventTarget インターフェイスのメソッドで、以前に EventTarget.addEventListener() で登録されたイベントリスナーを取り外します。 取り外されるイベントリスナーはイベントの型、イベントリスナー関数そのもの、照合プロセスに影響を与えるさまざまな任意のオプションを使用して識別します。 取り外すイベントリスナーの照合を参照してください。 | 1 | 12 | 1 | 1 | 18 | 1 |
removeEventListener (options parameter) `options` オブジェクトを含むフォームに対応（下位互換性のため、3番目の引数は `options` または `Boolean` のいずれかでも可） | 49 | 16 | 49 | 10 | 49 | 10 |
removeEventListener (useCapture parameter optional) `useCapture` パラメータは省略可能です | 1 | 12 | 6 | 1 | 18 | 1 |
- Chrome 53 および Opera 40 以降では、信頼できないイベントはデフォルトのアクションを実行しなくなりました。
- Chrome Android 53 および Opera 40 以降では、信頼できないイベントはデフォルトのアクションを実行しなくなりました。
- Chrome 49、Firefox 54、およびOpera 36以降、このプロパティは `DOMTimeStamp` ではなく `DOMHighResTimeStamp` を返すようになりました。
- Chrome 49、Firefox 54、およびOpera 36以降、このプロパティは `DOMTimeStamp` ではなく `DOMHighResTimeStamp` を返すようになりました。
- Chrome Android 49、Firefox 54、およびOpera 36以降、このプロパティは `DOMTimeStamp` の代わりに `DOMHighResTimeStamp` を返します。
- Safari 10.1 以前のバージョンでは、`window.EventTarget` は存在しませんでした。
- Safari iOS 10.3 以前のバージョンでは、`window.EventTarget` は存在しませんでした。
- Chrome 49 以前では、`type` および `listener` パラメータは省略可能でした。
- Chrome Android 49 以前では、`type` および `listener` パラメータは省略可能でした。
実務での使いどころ
-
Events の活用
CustomEvent インターフェイスは、何らかの目的でアプリケーションから初期化されるイベントを表します。
注意点
- 古いブラウザでは対応していない場合がある。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。