Event インターフェイス
Event インターフェイスは、イベントが発生すると取得できる event オブジェクトを定義したインターフェイスです。event オブジェクトからイベントタイプといったイベントの情報を取得することができます。
イベントとは、Web ページの遷移やエラーの発生、ポインターデバイスのアクション、キー入力、値の入力などの何らかのアクションやエラーによって発生する割り込み処理です。
<button onclick="( event )=>{ console.log( event ); }" />
イベントが発生して定義された関数や関数式が呼び出されると、その関数にイベント情報である event オブジェクトが渡されます。event オブジェクトの内容は開発コンソールで確認することができます。
詳しくは、以下の「Properties」、「Methods」、「Eventタイプ」を参照して下さい。
Event インターフェイスはすべてのエレメントが継承しています。
イベントハンドラーとイベント
どんなイベントを捉えるかはイベントハンドラーをタグエレメントに設定します。 on イベント名というイベントハンドラー属性または .addEventListener() 関数で設定します。
詳しくは以下のイベントハンドラーの構文
を参照してください。
以下はタグエレメントにおけるエレメント名、class 属性、イベントハンドラー属性、スタイルシート属性についての例です。
<p class="example_p" onclick="func_Example( event )" style="border:1px solid silver;">
この例では、<p> エレメントでマウスクリックが発生すると func_Example( event ) 関数を実行します。
イベントが発生すると定義された関数に event オブジェクトが渡されます。イベントタイプは event.type で取得します。
イベントハンドラーを定義、EventTargetが監視 ↓ ＊イベントが発生 ↓ EventTargetが反応 ↓ イベントに定義された関数または関数式を実行（eventオブジェクトが渡される）
イベントハンドラーとは、onclick 属性や onforcus 属性といった HTML ページや各エレメントで発生する入力出力や割り込みを捉える機能をもつ Widnow、Document、Element オブジェクトの属性です。
プロパティとして説明される場合もあります。イベント属性、イベントハンドラー属性などと説明される場合もあります。
イベントハンドラーの構文
実際のイベントを捉える方法は、タグエレメントにイベントハンドラー属性として記述する方法と、JavaScript でエレメントオブジェクトにイベントハンドラーを指定する。または JavaScript で addEventListener() 関数でイベントタイプを指定することでイベントハンドラーを設定する方法があります。。
<tagelement oninput="oneFunction()">
object.oninput = function(){ };
object.addEventListener("input", function(){...},false);
または
object.addEventListener("input", ()=>{...},false);
addEventListener()関数のfunction部分は引数を記述しない。関数側はfunction(event)とすると、eventオブジェクトを受け取ることができます。 詳しくは、addEventListener() を参照してください。
以下にProperty、Method、Eventタイプを示します。
コンストラクター（Constructor）
コンストラクターによって、Event オブジェクト作成ができます。.dispatchEvent() の引数に使用します。
new Event(EventType[, eventInit]);
EventType はイベントタイプの名称で以下の「イベントタイプ( イベント )」を参照のこと。eventInitはオプションです。
Properties
Example Syntax
var bubbles_value = event.bubbles;
| Property | 概要 |
|---|---|
| .bubbles | エレメントがイベントをバブリングするかどうかを示す |
| .cancelable | イベントをキャンセル可能か |
| .composed | Shadow DOM を超えて Document までイベントがバブリングするか／否か |
| .currentTarget | 現在対象となっているエレメント |
| .defaultPrevented | preventDefault()メソッドが呼び出されたか |
| .eventPhase | イベントの段階（フェーズ） |
| .target | イベントが発生したエレメント |
| .timeStamp | webページの読み込み完了からイベントの発生までの時間(ミリ秒数) |
| .type | イベントタイプ名。イベント名ともいう |
| .isTrusted | ユーザーによって発生したイベントか否か |
| .view | イベントが発生した Window オブジェクト |
Methods
| Method | 概要 |
|---|---|
| .composedPath() | あるイベントの発生によってその後に呼び出されるイベントリスナーの配列を返す。EventTarget オブジェクトの配列を返す |
| .preventDefault() | エレメントのデフォルトの機能、送信、リンクをたどるといった機能をキャンセル |
| .stopImmediatePropagation() | |
| .stopPropagation() | 親エレメントへのイベントのバブリングをキャンセル |
Event インターフェイス派生のインターフェイス
Event インターフェイスを元にした機能ごとのEvent インターフェイスです。子Event インターフェイスと呼びたいところですが、「Event インターフェイスを元にしたEvent インターフェイス」と呼んでいるようです。
| Interface | 対象イベント |
|---|---|
| AnimationEvent | CSSによるアニメーションの動作 |
| ClipboardEvent | クリップボードの変更 |
| DragEvent | ドラッグ、ドロップによって |
| FocusEvent | エレメントにフォーカスが当たる、失う |
| GamepadEvent | |
| HashChangeEvent | URLの#（ハッシュ）以降に変化があると |
| InputEvent | エレメントの値（コンテンツ）が変化する |
| KeyboardEvent | キーボード操作 |
| MouseEvent | マウス操作 |
| PageTransitionEvent | webページに訪れた、離れたとき |
| PopStateEvent | ウィンドウの履歴に変化があったときに |
| ProgressEvent | 外部リソースをロードするとき |
| StorageEvent | window storageに変化があると |
| TouchEvent | タッチデバイス操作 |
| UiEvent | ユーザーインターフェイスに関するEvent インターフェイスです。FocusEvent、InputEvent、KeyboardEvent、MouseEvent、TouchEvent、WheelEventの元のEvent インターフェイスです。 |
| WheelEvent |
インターフェイス(Interface)とは、オブジェクトやClassから呼び出される関数（method、function、ふるまい）の共有機能です。Event インターフェイスは、PropertyとMethod、Eventタイプをもちオブジェクトの形式をもっていますが、共有できる機能を提供するためにDOMではインターフェイスと呼びます。
DOMではMouseEventやFocusEventなどといった機能ごとのEvent インターフェイスが設けられています。機能ごとのEvent インターフェイスにはそれぞれのEventタイプが設定されています。
全ての機能ごとのEvent インターフェイスはEvent インターフェイスを継承しています。そのために各機能ごとのEvent インターフェイスは、EventオブジェクトのProperty、Method、そしてEventタイプが使えます。
イベントタイプ( イベントハンドラー )
イベントタイプは、イベントハンドラーを省略した名称です。Event.typeプロパティーで取得できます。
イベントハンドラーとは、Window、Document,各エレメントに設定してユーザーの操作やエレメントに動きを監視し、設定された関数や関数式を実行します。
例えば、
window.onload = function(){...};
の.onload = function(){...}の部分です。
イベントタイプ及びイベントハンドラーについては、イベントハンドラーを定義した、GlobalEventHandlers 、 WindowEventHandlers ミックスインやWindow、Document,各エレメントのイベントハンドラーを参照してください。
ただし、イベントハンドラーにはないですが、addEventListener()によって追加できるイベントタイプもあります。
以下はGlobalEventHandlers 、 WindowEventHandlers ミックスインのイベントタイプ及びイベントハンドラーの一覧です。カッコ内がイベントハンドラーです。
項目名分類
をクリックすると分類ごとに並べ替えをします（少し時間がかかります）。
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|---|---|
| open ( onopen ) | EventSource オブジェクトの接続が確立されたら | |
| toggle ( ) | <detail> エレメントを開くまたは閉じると | <detail> |
バブリング・キャプチャリング
発生したイベントはバブリング・キャプチャリングという機能によって親エレメントにイベントが伝わります。伝わったイベントは親エレメントでもイベントとして発生します。
| defaultView | |||
| ┃ | ↑ | ||
| ( キャプチャー ) | ┃ | ┃ | （バブリング ） |
| ↓ | ┃ | ||
| Document | |||
| ︰ | ↑ | ||
| ( キャプチャー ) | ┃ | ┃ | （バブリング ） |
| ┃ | ┃ | ||
| ↓ | ︰ | ||
| 親のエレメント | |||
| ┃ | ↑ | ||
| ( キャプチャー ) | ┃ | ┃ | （バブリング ） |
| ↓ | ┃ | ||
| エレメント ( ＊イベントが発生 ) | |||
バブリング・キャプチャリングについて詳しくはバブリング・キャプチャリングについて
を参照してください。