Eventインターフェイス
EventインターフェイスはWebページで発生するエラーやマウスアクション、値の入力などのイベントを捉える機能とそのイベントに関するプロパティとメソッドを提供するインターフェイスです。
イベントを捉える機能とは、onclickイベントやonforcusイベントと呼ばれるHTMLページで発生する入力出力や割り込みを捉える機能です。
この機能をEventインターフェイスのEventタイプといいます。
Eventインターフェイスはイベント機能を有するEventタイプを持ち、さらに必要なPropertyとMethodを持ちます。
詳しくは、以下の「Properties」、「Method」、「Eventタイプ」を参照して下さい。
インターフェイス(Interface)とは、オブジェクトやClassから呼び出される関数（method、function、ふるまい）の共有機能です。Eventインターフェイスは、PropertyとMethod、Eventタイプをもちオブジェクトの形式をもっていますが、共有できる機能を提供するためにDOMではインターフェイスと呼びます。
DOMではMouseEventやFocusEventなどといった機能ごとのEventインターフェイスが設けられています。機能ごとのEventインターフェイスにはそれぞれのEventタイプが設定されています。
全ての機能ごとのEventインターフェイスはEventインターフェイスを継承しています。そのために各機能ごとのEventインターフェイスは、EventオブジェクトのProperty、Method、そしてEventタイプが使えます。
詳しくは、以下の「Eventインターフェイス派生のインターフェイス」を参照して下さい。
Eventの構文
実際のイベントを捉える方法は、HTMLでエレメント属性として記述する方法と、JavaScriptでエレメントオブジェクトにEventタイプを指定する、addEventListener()関数を利用する方法があります。
<tagelement oninput="oneFunction()">
object.oninput = function(){ };
object.addEventListener("input", function);
addEventListener()関数のfunction部分は引数を記述しない。関数側はfunction(event)とすると、eventオブジェクトを受け取ることができます。
以下にProperty、Method、Eventタイプを示します。
Properties
Example Syntax
var bubbles_value = event.bubbles;
| Property | |
|---|---|
| bubbles | |
| cancelBubble | |
| cancelable | |
| composed | |
| currentTarget | |
| defaultPrevented | |
| eventPhase | |
| returnValue | |
| target | |
| timeStamp | |
| type | |
| isTrusted |
Methods
| Method | |
|---|---|
| create() | |
| composedPath() | |
| preventDefault() | |
| stopImmediatePropagation() | |
| stopPropagation() |
Event Types
Eventタイプはエレメントに設定してwebページで起こるイベントを捉えます。
Example Syntax
object.onabort = function(){script_or_function};
| Event type | イベント発生の条件 |
|---|---|
| onabort | <audio>または<video>メディアデータのダウンロードが中止されたら |
| afterprint 未対応ブラウザあり | 印刷時ダイアログが閉じ、印刷開始前 |
| beforeprint 未対応ブラウザあり | 印刷ダイアログが表示される前 |
| onbeforeunload | 現在のドキュメント（webページ）を閉じるや他のページに移動する |
| oncanplay | <audio>または<video>メディアが開始するのに十分なバッファリングができたら |
| oncanplaythrough | <audio>または<video>メディアのバッファリングで停止することなく再生できると推定できたら |
| onchange | タグエレメントの値が変化したら |
| onerror | 外部ファイルのロード中にエラーが起きると |
| fullscreenchange | |
| fullscreenerror | |
| oninput | 入力があったら |
| invalid | |
| onload | ロードが起きたら |
| onloadeddata | フレームの再生において十分なデータがロードされなかったら |
| onloadedmetadata | メタデータがロードされたら |
| message | |
| offline | |
| online | |
| open | |
| onpause | <audio>,<video>メディアを一時停止したら |
| onplay | メディアが再生されたら |
| onplaying | バッファリングのために一時停止または停止した後に再生を再開すると |
| onprogress | メディアデータのダウンロードの間に |
| onratechange | 再生速度が変更されたら |
| onresize | ブラウザのWindowのサイズを変更したら |
| onreset | <form>エレメントがリセットされたら |
| onscroll | スクロールバーを操作したら |
| search | |
| onseeked | 再生位置を変更するまたはスキップすると |
| onseeking | 再生位置を変更するまたはスキップすると |
| onselect | エレメント内の幾つかのテキストが選択されたら |
| show | |
| onstalled | メディアデータを取得してもそのデータが利用できないとき |
| onsubmit | 送信を行ったら |
| onsuspend | メディアデータが意図的に取得できないとき |
| ontimeupdate | メディアの再生が中段されたら |
| ontoggle | <detail>エレメントを開くまたは閉じると |
| onunload | webページを遷移する行為、formを送信する、または閉じると |
| onwaiting | メディアで次のフレームのためのバッファーによって中断する |
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 |