下記ソースは、pを監視しています。
html
1<div id="superParent"> 2<p id="parent"><span id="child">あいうえお(false/バブリング)</span></p> 3</div> 4 5<div id="superParent2"> 6<p id="parent2"><span id="child2">あいうえお2(true/キャプチャ)</span></p> 7</div> 8 9<script type="text/javascript"> 10var p = document.getElementById("parent"); 11var p2 = document.getElementById("parent2"); 12 13//イベントバブリング mouseenter、mouseleaveは、バブリングしないが、mouseover、mouseoutは、バブリングする。 14p.addEventListener("mouseover", function(e) { 15test(e) 16},false); 17//イベントキャプチャ 18p2.addEventListener("mouseenter", function(e) { 19test(e) 20},true); 21 22function test(e) { 23 var t=e.target 24 if(t.nodeName=="SPAN") { 25 console.log("イベントの流れの段階",e.eventPhase+"イベント発生元要素"+t+"★"+t.nodeName+":"+e.type); 26 } 27 if(t.nodeName=="P") { 28 console.log("イベントの流れの段階",e.eventPhase+"イベント発生元要素"+t+"★"+t.nodeName+":"+e.type); 29 } 30 if(t.nodeName=="DIV") { 31 console.log("イベントの流れの段階",e.eventPhase+"イベント発生元要素"+t+"★"+t.noneName+":"+e.type); 32 } 33} 34</script>
変数pは、イベントが発生するとバブリングするのですが、コンソール画面には、
spanがイベント発生元だった場合、
イベントの流れの段階 2イベント発生元要素[object HTMLParagraphElement]★P:mouseover
イベントの流れの段階 3イベント発生元要素[object HTMLSpanElement]★SPAN:mouseover
pがイベント発生元だった場合、
イベントの流れの段階 2イベント発生元要素[object HTMLParagraphElement]★P:mouseover
と表示されます。
ここで質問ですが、なぜid:parentの親要素であるdivは、コンソール画面に表示されないのでしょうか。
イベントの流れ(eventPhase)が3→2と来ているので、恐らく1は、divだと思うのですがなぜ、表示されないのでしょうか。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/21 10:08
2016/12/21 10:13
2016/12/21 11:09
2016/12/21 11:56 編集
2016/12/22 09:12
2016/12/22 14:08
2016/12/26 05:11