備忘録的リファレンス

Eventインターフェイス

 EventインターフェイスはWebページで発生するエラーやマウスアクション、値の入力などのイベントを捉える機能とそのイベントに関するプロパティとメソッドを提供するインターフェイスです。

 各エレメントで発生するイベントは、EventTargetによって捉えられEventインターフェイスに渡されます。

イベントを捉える流れ
*イベントが発生 - - -> エレメントのEventTarget - - -> Event

 イベントを捉える機能とは、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()関数を利用する方法があります。

HTMLでエレメント属性のEventタイプ
<tagelement oninput="oneFunction()">
JavaScriptでオブジェクトにEventタイプを指定
object.oninput = function(){ };
JavaScriptでオブジェクトにaddEventListener()関数で指定
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現在対象となっているエレメント
defaultPreventedpreventDefault()メソッドが呼び出されたか
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イベント発生の条件
abort<audio>または<video>メディアデータのダウンロードが中止されたら
afterprint 未対応ブラウザあり印刷時ダイアログが閉じ、印刷開始前
beforeprint 未対応ブラウザあり印刷ダイアログが表示される前
beforeunload現在のドキュメント(webページ)を閉じるや他のページに移動する
canplay<audio>または<video>メディアが開始するのに十分なバッファリングができたら
canplaythrough<audio>または<video>メディアのバッファリングで停止することなく再生できると推定できたら
changeタグエレメントの値が変化したら
error外部ファイルのロード中にエラーが起きると
fullscreenchangeフルスクリーンモードの表示または終了
fullscreenerrorフルスクリーンモードで表示エラー
input入力があったら
invalid
loadロードが起きたら
loadeddataフレームの再生において十分なデータがロードされなかったら
loadedmetadataメタデータがロードされたら
message
offline
online
open
pause<audio>,<video>メディアを一時停止したら
playメディアが再生されたら
playingバッファリングのために一時停止または停止した後に再生を再開すると
progressメディアデータのダウンロードの間に
ratechange再生速度が変更されたら
resizeブラウザのWindowのサイズを変更したら
reset<form>エレメントがリセットされたら
scrollスクロールバーを操作したら
search
seeked再生位置を変更するまたはスキップすると
seeking再生位置を変更するまたはスキップすると
selectエレメント内の幾つかのテキストが選択されたら
show
stalledメディアデータを取得してもそのデータが利用できないとき
submit送信を行ったら
suspendメディアデータが意図的に取得できないとき
timeupdateメディアの再生が中段されたら
toggle<detail>エレメントを開くまたは閉じると
unloadwebページを遷移する行為、formを送信する、または閉じると
waitingメディアで次のフレームのためのバッファーによって中断する

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