event.eventPhaseは、イベントバブルのイベントの流れ（イベントフロー）のどの段階（イベントフェーズ）であるかを返すプロパティ。
イベントバブルとは、子要素のイベントが発生すると、その親要素や先祖要素の同じタイプのイベントが発生すること。
構文
event.eventPhase
戻り値
| 戻り値 | 意味 |
| 0 | Event.NONE ／ なし |
| 1 | Event.CAPTURING_PHASE ／ キャプチャ段階 |
| 2 | Event.AT_TARGET ／ ターゲット段階 |
| 3 | Event.BUBBLING_PHASE ／ バブリング段階（バブリングフェーズ） |
サンプル
sample1：
sample2：
sample3：
サンプルの動作について
- 「sample1」のDIV要素をクリックすると、「sample1：」の右横に「2」と表示する。
- 「sample2」のDIV要素をクリックすると、「sample2: 」の右横に「2」、「sample1: 」の右横に「3」と表示する。
- 「sample3」のDIV要素をクリックすると、「sample3: 」の右横に「2」、「sample2: 」の右横に「3」、「sample1: 」の右横に「3」と表示する。
- 「リセット」ボタンをクリックすると、表示した各数字を消す。各DIV要素をクリックする前に、「リセット」ボタンをクリックして数字を消しておいた方が分かりやすい。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sample1" ).onclick = function( $event1 ){
document.getElementById( "sample1output" ).insertAdjacentHTML( 'beforeend', $event1.eventPhase );
};
document.getElementById( "sample2" ).onclick = function( $event2 ){
document.getElementById( "sample2output" ).insertAdjacentHTML( 'beforeend', $event2.eventPhase );
};
document.getElementById( "sample3" ).onclick = function( $event3 ){
document.getElementById( "sample3output" ).insertAdjacentHTML( 'beforeend', $event3.eventPhase );
};
document.getElementById( "sampleReset" ).onclick = function(){
document.getElementById( "sample1output" ).innerHTML = "";
document.getElementById( "sample2output" ).innerHTML = "";
document.getElementById( "sample3output" ).innerHTML = "";
};
}
</script>
window.onload = function () {
document.getElementById( "sample1" ).onclick = function( $event1 ){
document.getElementById( "sample1output" ).insertAdjacentHTML( 'beforeend', $event1.eventPhase );
};
document.getElementById( "sample2" ).onclick = function( $event2 ){
document.getElementById( "sample2output" ).insertAdjacentHTML( 'beforeend', $event2.eventPhase );
};
document.getElementById( "sample3" ).onclick = function( $event3 ){
document.getElementById( "sample3output" ).insertAdjacentHTML( 'beforeend', $event3.eventPhase );
};
document.getElementById( "sampleReset" ).onclick = function(){
document.getElementById( "sample1output" ).innerHTML = "";
document.getElementById( "sample2output" ).innerHTML = "";
document.getElementById( "sample3output" ).innerHTML = "";
};
}
</script>
HTML
<p><button id="sampleReset">リセット</button></p>
<div id="sample1">
sample1：<span id="sample1output"></span>
<div id="sample2">
sample2：<span id="sample2output"></span>
<div id="sample3">
sample3：<span id="sample3output"></span>
</div>
</div>
</div>
<div id="sample1">
sample1：<span id="sample1output"></span>
<div id="sample2">
sample2：<span id="sample2output"></span>
<div id="sample3">
sample3：<span id="sample3output"></span>
</div>
</div>
</div>
CSS
<style>
#sample1,
#sample2,
#sample3 {
margin-top: 7px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
}
</style>
#sample1,
#sample2,
#sample3 {
margin-top: 7px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
}
</style>