Event インターフェイス

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

　どんなイベントを捉えるかはイベントハンドラーをタグエレメントに設定します。 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()">

object.oninput = function(){ };

object.addEventListener("input", function(){...},false);

object.addEventListener("input", ()=>{...},false);

　以下にProperty、Method、Eventタイプを示します。

コンストラクター（Constructor）

　コンストラクターによって、Event オブジェクト作成ができます。.dispatchEvent() の引数に使用します。

new Event(EventType[, eventInit]);

　EventType はイベントタイプの名称で以下の「イベントタイプ( イベント )」を参照のこと。eventInitはオプションです。

Properties

Example Syntax

var bubbles_value = event.bubbles;

Methods

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

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

　インターフェイス(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(){...};

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

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

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

関連（Related）