備忘録的プログラミングリファレンス

eventPhase プロパティ

Event.eventPhase

 eventPhase プロパティは、イベントがどの段階(フェーズ)にあるのかを返すEventのプロパティです。

bubbles プロパティ
document.getElementById("example").addEventListener("click", (event) => {
	console.log( event.eventPhase );
}, false);
詳しくはExampleを参照してください

 フェーズは、イベントの発生元、キャプチャとバブリング、イベントが起きていないに分けられます。

ページ内 Index

フェーズについて

 eventPhase プロパティの返り値とイベントがどの段階(フェーズ)であるかは以下のようになっています。

番号摘要
0イベントが発生していない
1キャプチャ
2ターゲット(イベントの発生元)
3バブリング

 以下は、バブリングとキャプチャ、イベントの発生元とフェーズの番号を示した図です。

defaultView
( キャプチャー : フェーズ 1 )(バブリング : フェーズ 3 )
Document
( キャプチャー : フェーズ 1 )(バブリング : フェーズ 3 )
親のエレメント
( キャプチャー : フェーズ 1 )(バブリング : フェーズ 3 )
エレメント ( *イベントが発生 : フェーズ 2 )

構文(Syntax)

返り値はNumber型です。

Number = event.eventPhase;

返り値(Return Values)

TypeValue摘要
NumberNONE0...なし
CAPTURING_PHASE1...キャプチャの段階
AT_TARGET2...ターゲット(イベントが主ターゲットにしているエレメント)
BUBBLING_PHASE3...バブリング(子要素でイベントが発生)

Example

 eventPhase の例です。確認ボタンをクリックして例を実行してください。
 

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。