SYNCERのロゴ
アイキャッチ画像

Event - イベント

Eventは、イベントの内容を確認したり、変更するための機能を備えたインターフェイスです。

概要

名前
Event
IDL
[Constructor(DOMString type, optional EventInit eventInitDict),
 Exposed=(Window,Worker,AudioWorklet)]
interface Event {
  readonly attribute DOMString type;
  readonly attribute EventTarget? target;
  readonly attribute EventTarget? currentTarget;
  sequence<EventTarget> composedPath();

  const unsigned short NONE = 0;
  const unsigned short CAPTURING_PHASE = 1;
  const unsigned short AT_TARGET = 2;
  const unsigned short BUBBLING_PHASE = 3;
  readonly attribute unsigned short eventPhase;

  void stopPropagation();
           attribute boolean cancelBubble; // historical alias of .stopPropagation
  void stopImmediatePropagation();

  readonly attribute boolean bubbles;
  readonly attribute boolean cancelable;
  void preventDefault();
  readonly attribute boolean defaultPrevented;
  readonly attribute boolean composed;

  [Unforgeable] readonly attribute boolean isTrusted;
  readonly attribute DOMHighResTimeStamp timeStamp;

  void initEvent(DOMString type, optional boolean bubbles = false, optional boolean cancelable = false); // historical
};

dictionary EventInit {
  boolean bubbles = false;
  boolean cancelable = false;
  boolean composed = false;
};

typedef double DOMHighResTimeStamp;
仕様書
https://dom.spec.whatwg.org/#event

チュートリアル

Eventはイベントが発生した時にコールバック関数に渡されます。

var callbackFn( event ) {
	console.log( event ) ;	// Event
}

document.onclick = callbackFn ;

コンストラクタを使って、独自のイベントなどを作成することができます。作成したイベントは、EventTarget.dispatchEvent()の引数にしたりできます。

// Eventを作成
var event = new Event( "hoge" ) ;

// Eventを発生
element.dispatchEvent( event ) ;

プロパティ

bubbles

このイベントが、バブリングフェイズで伝播するか否かを返します。

【非推奨】cancelBubble

trueを代入すると、現在のイベントで伝播を終了させます。このメソッドは利用できなくなる予定です。代わりにstopPropagation()を利用して下さい。

cancelable

イベントがキャンセル可能か否かを返します。

composed

通常のDOMとShadow DOMの間でイベントが伝播するか否かを返します。

currentTarget

自身(イベント)にアタッチされているオブジェクトを返します。

defaultPrevented

イベントにおいて、規定の動作がキャンセルされたか否かを返します。

eventPhase

現在のイベントフェイズを表す数値を返します。

isTrusted

イベントがユーザーの操作により発生したか否かを返します。

target

イベントの発信源となったオブジェクトを返します。

timeStamp

イベントが作成されてからのミリ秒単位の経過時間を返します。

type

イベントの種類を返します。

メソッド

composedPath()

イベントが伝播するノードを順番に含んだ配列を返します。

initEvent()

Document.createEvent()で作成したイベントを初期化します。

preventDefault()

規定の動作を行ないません。

stopImmediatePropagation()

同じオブジェクトの同じイベントに複数のリスナーが設定されている場合、このメソッドを実行すると、その時点で他のリスナーを実行しません。

stopPropagation()

現在のイベントで、イベントの伝播を終了させます。

定数

AT_TARGET

2を返します。この値は、イベントフェイズがターゲットフェイズであることを表します。

BUBBLING_PHASE

3を返します。この値は、イベントフェイズがバブリングフェイズであることを表します。

CAPTURING_PHASE

1を返します。この値は、イベントフェイズがキャプチャリングフェイズであることを表します。

NONE

0を返します。この値は、イベントフェイズがどの段階でもない状態を表します。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
Event
Event() 15+ 11+ 6.0+× 11.6+ 6.0+ 4.4+
AT_TARGET 9+
bubbles 19+ 6.0+ 9+ 6.0+ 4.3+
BUBBLING_PHASE 9+
cancelable 19+ 6.0+ 9+ 6.0+ 4.3+
cancelBubble 19+ 5+ 6.0+ 6.0+ 4.3+
CAPTURING_PHASE 9+
composed 53+ 52+ 10+×× 40+ 10.0+×
composedPath() 53+× 10+×× 40+ 10.0+×
currentTarget 19+ 6.0+ 9+ 6.0+ 4.3+
defaultPrevented 19+ 6+ 6.0+ 9+ 6.0+ 4.0+
eventPhase 19+ 6.0+ 9+ 6.0+ 4.3+
initEvent() 9+
isTrusted 46+ 10+ 9+ 33+ 10.0+×
NONE 20+ 15+ 6.0+ 16+× 15+ 6.0+ 4.4+
preventDefault() 9+
stopImmediatePropagation() 10+ 5.1+ 9+ 15+ 4.0+
stopPropagation() 9+
target 19+ 6.0+ 9+ 6.0+ 4.3+
timeStamp 19+ 6.0+ 9+ 6.0+ 4.3+
type 19+ 6.0+ 6.0+ 4.3+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月3日 (火)
コンテンツを公開しました。