質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.20%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,161

aaaaaaaa

score 481

マウスが当該の要素にふれたというイベント、その要素からマウスが離れた時のイベントに応じて、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で止められますか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+5

 イベントバブリング

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

 event.stopPropagation()

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

Re: aaaaaaaa さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/15 12:07

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

    キャンセル

  • 2016/12/16 00:58 編集

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

    キャンセル

checkベストアンサー

+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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/20 18:47 編集

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.20%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる