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 ) ;
コンストラクタ
Event()
新しい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を返します。この値は、イベントフェイズがどの段階でもない状態を表します。
イベント
固有のイベントハンドラはありません。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
Event | ● | ● | ● | ● | ● | ● | ● | ● |
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+ |
Event() | ● | ● | ● | ● | × | ● | ● | ● 4.4+ |
eventPhase | ● 19+ | ● | ● 6.0+ | ● | ● 9+ | ● | ● 6.0+ | ● 4.3+ |
initEvent() | ● | ● | ● | ● | ● 9+ | ● | ● | ● |
isTrusted | ● 46+ | ● | ● 10+ | ● | ● 9+ | ● 33+ | ● 10.0+ | × |
NONE | ● 20+ | ● 15+ | ● 6.0+ | × | × | ● 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+ |
関連記事
- Document.createEvent()
- createEvent()は、Documentのメソッドです。イベント(Event)を新しく作成します。
- EventTarget.dispatchEvent()
- dispatchEvent()は、EventTargetのメソッドです。ターゲットに対して、任意のイベントを発生させます。
- errorイベント
- errorイベントは、何らかのエラー時に発生するイベントです。
- Event.preventDefault()
- preventDefault()は、Eventのメソッドです。例えばリンクをクリックした時に遷移する、チェックボックスをクリックしたらチェックが入る、などの規定の動作を行ないません。イベントの伝播は止まりません。