eventPhase プロパティ
event.eventPhase
eventPhase プロパティは、イベントがキャプチャやバブリングといったどの段階（フェーズ）にあるのかを返すEventのプロパティです。
document.getElementById("example").addEventListener("click", (event) => {
console.log( event.eventPhase );
}, false);
詳しくは Example を参照してください
フェーズは、イベントの発生元、キャプチャとバブリング、イベントが起きていないに分けられます。
ページ内 Index
- ad -
フェーズについて
eventPhase プロパティの返り値とイベントがどの段階（フェーズ）であるかは以下のようになっています。
| 番号 | 摘要 |
|---|---|
| 0 | イベントが発生していない |
| 1 | キャプチャ |
| 2 | ターゲット（イベントの発生元） |
| 3 | バブリング |
以下は、バブリングとキャプチャ、イベントの発生元とフェーズの番号を示した図です。
| defaultView | |||
| ┃ | ↑ | ||
| ( キャプチャー : フェーズ 1 ) | ┃ | ┃ | （バブリング : フェーズ 3 ） |
| ↓ | ┃ | ||
| Document | |||
| ︰ | ↑ | ||
| ( キャプチャー : フェーズ 1 ) | ┃ | ┃ | （バブリング : フェーズ 3 ） |
| ┃ | ┃ | ||
| ↓ | ︰ | ||
| 親のエレメント | |||
| ┃ | ↑ | ||
| ( キャプチャー : フェーズ 1 ) | ┃ | ┃ | （バブリング : フェーズ 3 ） |
| ↓ | ┃ | ||
| エレメント ( ＊イベントが発生 : フェーズ 2 ) | |||
構文(Syntax)
返り値はNumber型です。
Number = event.eventPhase;
返り値(Return Values)
| Type | Value | 摘要 |
|---|---|---|
| Number | NONE | 0...なし |
| CAPTURING_PHASE | 1...キャプチャの段階 | |
| AT_TARGET | 2...ターゲット（イベントが主ターゲットにしているエレメント） | |
| BUBBLING_PHASE | 3...バブリング（子要素でイベントが発生） |
Example
eventPhase の例です。確認ボタン
をクリックして例を実行してください。
- ad -