備忘録的リファレンス

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()関数を利用する方法があります。

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
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>エレメントを開くまたは閉じると
onunloadwebページを遷移する行為、formを送信する、または閉じると
onwaitingメディアで次のフレームのためのバッファーによって中断する

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