備忘録的プログラミングリファレンス

Event インターフェイス

 Event インターフェイスは、イベントが発生すると取得できる event オブジェクトを定義したインターフェイスです。event オブジェクトからイベントタイプといったイベントの情報を取得することができます。
 イベントとは、Web ページの遷移やエラーの発生、マウスアクション、キー入力、値の入力などの何らかのアクションやエラーによって発生する割り込み処理です。

イベント
<button onclick="(event)=>{ console.log( event ); }" />

  イベントが発生して定義された関数や関数式が呼び出されると、その関数にイベント情報である event オブジェクトが渡されます。イベントの内容は event オブジェクトのプロパティやメソッドで確認することができます。
 詳しくは、以下の「Properties」「Methods」「Eventタイプ」を参照して下さい。

ページ内 Index

イベントハンドラーとイベント

 どんなイベントを捉えるかはイベントハンドラーをタグエレメントに設定します。 on イベント名というイベントハンドラー属性または .addEventListener() 関数で設定します。
 詳しくは以下のイベントハンドラーの構文を参照してください。

 以下はタグエレメントにおけるエレメント名、class 属性、イベントハンドラー属性、スタイルシート属性についての例です。

<p(Element) class="example_p"(Attr) onclick="func_Example( event )"(Event) style="border:1px solid silver;"(CSS,Style)>

 この例では、<p> エレメントでマウスクリックが発生すると func_Example( event ) 関数を実行します。

 イベントが発生すると定義された関数に event オブジェクトが渡されます。イベントタイプは event.type で取得します。

イベントを捉える流れ
イベントハンドラーを定義、EventTargetが監視
↓
*イベントが発生
↓
EventTargetが反応
↓
イベントに定義された関数または関数式を実行(eventオブジェクトが渡される)

 イベントハンドラーとは、onclick 属性や onforcus 属性といった HTML ページや各エレメントで発生する入力出力や割り込みを捉える機能をもつ Widnow、Document、Element オブジェクトの属性です。
 プロパティとして説明される場合もあります。イベント属性、イベントハンドラー属性などと説明される場合もあります。

イベントハンドラーの構文

 実際のイベントを捉える方法は、タグエレメントにイベントハンドラー属性として記述する方法と、JavaScript でエレメントオブジェクトにイベントハンドラーを指定する。または JavaScript で addEventListener() 関数でイベントタイプを指定することでイベントハンドラーを設定する方法があります。。

タグエレメントにイベントハンドラー属性を記述
<tagelement oninput="oneFunction()">
JavaScript でオブジェクトに イベントハンドラーを設定
object.oninput = function(){ };
JavaScript でオブジェクトに addEventListener() 関数で設定
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イベントをキャンセル可能か
.composedShadow DOM を超えて Document までイベントがバブリングするか/否か
.currentTarget現在対象となっているエレメント
.defaultPreventedpreventDefault()メソッドが呼び出されたか
.eventPhaseイベントの段階(フェーズ)
.targetイベントが発生したエレメント
.timeStampwebページの読み込み完了からイベントの発生までの時間(ミリ秒数)
.typeイベントタイプ名。イベント名ともいう
.isTrustedユーザーによって発生したイベントか否か

Methods

Method概要
.composedPath()あるイベントの発生によってその後に呼び出されるイベントリスナーの配列を返す。EventTarget オブジェクトの配列を返す
.preventDefault()エレメントのデフォルトの機能、送信、リンクをたどるといった機能をキャンセル
.stopImmediatePropagation()
.stopPropagation()親エレメントへのイベントのバブリングをキャンセル

Eventインターフェイス派生のインターフェイス

 Eventインターフェイスを元にした機能ごとのEventインターフェイスです。子Eventインターフェイスと呼びたいところですが、「Eventインターフェイスを元にしたEventインターフェイス」と呼んでいるようです。

Interface対象イベント
AnimationEventCSSによるアニメーションの動作
ClipboardEventクリップボードの変更
DragEventドラッグ、ドロップによって
FocusEventエレメントにフォーカスが当たる、失う
GamepadEvent
HashChangeEventURLの#(ハッシュ)以降に変化があると
InputEventエレメントの値(コンテンツ)が変化する
KeyboardEventキーボード操作
MouseEventマウス操作
PageTransitionEventwebページに訪れた、離れたとき
PopStateEventウィンドウの履歴に変化があったときに
ProgressEvent外部リソースをロードするとき
StorageEventwindow 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(){...}の部分です。

 イベントタイプ及びイベントハンドラーについては、イベントハンドラーを定義した、GlobalEventHandlersWindowEventHandlers ミックスインやWindow、Document,各エレメントのイベントハンドラーを参照してください。

 ただし、イベントハンドラーにはないですが、addEventListener()によって追加できるイベントタイプもあります。

 以下はGlobalEventHandlersWindowEventHandlers ミックスインのイベントタイプ及びイベントハンドラーの一覧です。カッコ内がイベントハンドラーです。 項目名分類をクリックすると分類ごとに並べ替えをします(少し時間がかかります)。

タイプ名(ハンドラー名)概要分類
open ( onopen )EventSource オブジェクトの接続が確立されたら
toggle ( )<detail> エレメントを開くまたは閉じると<detail>