子要素にイベントが発生する理由とは

Question

マウスが当該の要素にふれたというイベント、その要素からマウスが離れた時のイベントに応じて、mouseenterとmouseleaveとmouseover、mouseoutで処理を行います。
この2種類は、微妙に動作が違います。

<p id="parent"><span id="child"></span></p>

mouseenter、mouseleaveとmouseover、mouseoutでspanの親要素である<p>にイベントが発生しないか監視していたとします。するとこの二種類は、下記の違いが現れます。

前者(mouseenter、mouseleave)だと、pのみイベントが発生しますが、後者だとpだけでなくspanまでイベントが発生します。ここで質問ですが、これはイベントキャプチャと呼ばれる親要素(p)で発生したイベントが子要素(span)伝播する現象が発生するために、このような動きになるのでしょうか。
後者がイベントが最上位ノードに伝播するバブリングを行うことは知っておりますが、キャプチャするのかどうか、が分かりません。

二つ目の質問ですがもし、このspanのイベントまでを補足するということは、逆にpに親要素が存在していた場合、spanがそうだったように、バブリングでpの親要素までイベントが発生してしまうのでしょうか。

また、pのみイベントを発生させ、親要素の伝播を止めるとき、return falseやe.stopPropagation()、e.preventDefault()のうちe.prebentDefaultで止められますか。

Answer 1

イベントバブリング

mouseenter, mouseleave は「Bubbles: no」なのでイベントバブリングは発生しませんが、mouseover, mouseout はイベントバブリングします。
バブリングされたイベントはルートノードに行き着くまで親ノードへ伝播し続けます。
ルートノードとは DOM L3 Events までは document でしたが、HTML Living Standard を経て現在では window がルートノードです。
詳細は下記リンクを参考にしてください。順を追って三回から後も読み進めれば深く理解できると思います。

• 三章第三回　イベントバブリング — JavaScript初級者から中級者になろう — uhyohyo.net

event.stopPropagation()

event.stopPropagation() はイベントの伝播を止めます。

• event.stopPropagation - Web API インターフェイス | MDN

Re: aaaaaaaa さん

Comments

[aaaaaaaa]

ご返答有難うございます。
>>バブリングは発生しませんが、<中略>mouseover, mouseout はイベントバブリングします。
これは、二つ目の質問に対する回答でしょうか。
つまり、バブリングを行うので、```p```で発生したイベントは、親要素にも伝播し```p```の親要素が存在した場合、親要素も```<span>```がそうだったようにイベントが発生する、との認識であっておりますか。

[think49]

親記事を編集しました。
簡単な説明にとどめたのは http://uhyohyo.net/javascript/3_3.html に詳しい説明があるからです。
リンク先を読んでわからない点があれば該当箇所に言及してより具体的に質問して下さい。
また、質問の大半は検証すれば理解できる内容に思います。
実際に検証してみて結果から判断すると、より理解が進むのではないでしょうか。

Answer 2

実装方法によって挙動は変わってきます
たとえばaddEventListenerでイベントをつかむとして、mouseenterの場合
キャプチャしなければpで完結しますが、キャプチャするとspanまで伝播します

<script>
window.onload=function(){
  document.getElementById('parent1').addEventListener('mouseenter',function(e){test(e)},false);
  document.getElementById('parent2').addEventListener('mouseenter',function(e){test(e)},true);
}
function test(e){
  var t=e.target;
  if(t.nodeName=="SPAN"){
    console.log(t.nodeName+":"+e.type);
  }
  if(t.nodeName=="P"){
    console.log(t.nodeName+":"+e.type);
  }
}
</script>
<div><p id="parent1"><span id="child1">test1</span></p></div>
<div><p id="parent2"><span id="child2">test2</span></p></div>

Comments

[aaaaaaaa]

ご回答有難うございます。やはり、イベントキャプチャによるものなのですね。