divがイベントキャプチャされない理由

Question

下記ソースは、pのイベントを監視しています。

<div id="superParent">
<p id="parent"><span id="child">あいうえお(false/バブリング)</span></p>
</div>

<div id="superParent2">
<p id="parent2"><span id="child2">あいうえお2(true/キャプチャ)</span></p>
</div>

<script type="text/javascript">
var p = document.getElementById("parent");
var p2 = document.getElementById("parent2");

//イベントバブリング mouseenter、mouseleaveは、バブリングしないが、mouseover、mouseoutは、バブリングする。
p.addEventListener("mouseover", function(e) {
test(e)
},false);
//イベントキャプチャ
p2.addEventListener("mouseenter", function(e) {
test(e)	
},true);

function test(e) {
	var t=e.target
	if(t.nodeName=="SPAN") {
	    console.log("イベントの流れの段階",e.eventPhase+"イベント発生元要素"+t+"★"+t.nodeName+":"+e.type);
	}
	if(t.nodeName=="P") {
		console.log("イベントの流れの段階",e.eventPhase+"イベント発生元要素"+t+"★"+t.nodeName+":"+e.type);
	}
	if(t.nodeName=="DIV") {
		console.log("イベントの流れの段階",e.eventPhase+"イベント発生元要素"+t+"★"+t.nodeName+":"+e.type);
	}
}
</script>

イベントキャプチャなので、最上位ノード(window)からイベント発生元まで伝播します。
変数p2でイベントが発生すればコンソール画面には、
イベントの流れの段階 2イベント発生元要素[object HTMLParagraphElement]★P:mouseenter
と表示されます。
spanでイベントが発生すれば
イベントの流れの段階 2イベント発生元要素[object HTMLParagraphElement]★P:mouseenter
イベントの流れの段階 1イベント発生元要素[object HTMLSpanElement]★SPAN:mouseenter
と表示されます。

ここで二つ質問があります。
1.
spanでイベントが発生した際、イベントキャプチャなので、最上位ノードからp、spanと伝播しましたが、
コンソール画面には、pとspanしか表示されておりません。
pとspanが表示されたのに、pの親要素であるdivが表示されていない理由は、何なのでしょうか。
上から伝播されてくるのであれば、divが表示されても良いような気がするのですが。

なぜ、divが表示されないのか調べていたとき、getElementByIdのメソッドを「parent2」から「superParent2」に変えたところ
イベントの流れの段階 2イベント発生元要素[object HTMLDivElement]★DIV:mouseenter
イベントの流れの段階 1イベント発生元要素[object HTMLParagraphElement]★P:mouseenter
イベントの流れの段階 1イベント発生元要素[object HTMLSpanElement]★SPAN:mouseenter
と表示されました。なぜ、parent2からsuperParent2に変えたところ、質問1であったように、divが表示されるようになったのでしょうか。

Answer 1

親要素でイベントキャプチャすれば見えます。

• バブリング/キャプチャリングフェーズ - JSFiddle

Re: aaaaaaaa さん

Comments

[aaaaaaaa]

ご回答有難うございます。親要素というのは、
var p2 = document.getElementById("parent2");
を
var p2 = document.getElementById("superParent2");に変更する、つまりpからdivに変更することで、ということでしょうか。
http://fast-uploader.com/file/7037952908695/
divがなぜかundefinedと表示されていますが、確かにdiv→p→spanの通りになりました。
しかしなぜdivのみundefinedと表示されたり、superParent2に変えると、divも表示されるようになったのでしょうか。

[think49]

現象を再現可能なコードを https://jsfiddle.net/ にUPしてください。

[aaaaaaaa]

ご返答有難うございます。
「しかしなぜdivのみundefinedと表示されたり、superParent2に変えると、divも表示されるようになったのでしょうか」のソースは、下記となります。
http://jsdo.it/rrrrrrrr/ekVv

[think49]

> しかしなぜdivのみundefinedと表示されたり、
t.noneName を t.nodeName に修正したら直るのではないでしょうか。

> superParent2に変えると、divも表示されるようになったのでしょうか。
変更前のコードは質問文のコードでしょうか。
div要素がイベント発生源ならば親要素から順番にイベントが伝播してdiv要素でとまりますのでp要素では捕捉できません。
以前も紹介しましたが、uhyohyo.net は分かりやすく解説しているので一通りの記事に目を通しておくことをお勧めします。
http://uhyohyo.net/javascript/3_4.html

[aaaaaaaa]

ご回答有難うございました。