(cache) イベントバブルとは

イベントバブルとは

例１：

例２：

例３：

イベントバブル、events Bubblingとは

ある要素でイベントが発生し実行されると、さらにその要素を含む上位要素の同じイベントを実行する。このようにイベントは次の親エレメントまで順々に階層をバブルアップし(上の階層をたどる、浮上する)、同じイベントを実行していき、最終的にドキュメントオブジェクトまで達する。
イベントが階層にバブルアップしないようにするには、イベントハンドラでevent.cancelBubbleプロパティをtrueに設定する。そのイベントはバブルアップを止め、即座に終了する。

上の例では

例１)ボタンがクリックされると、button→span→p→div→body の全てのonclickイベントが順じ実行される。
例２)ボタンがクリックされると、ボタンにはonclickイベントは記述されていないが、button→span→p→div→body とバブルアップし、onclickイベントが記述されている要素のイベントを順じ実行する。
例３)ボタンがクリックされると、button→span→p→div→body の全てのonclickイベントが順じ実行されるはずだが、PタグにcancelBubbleプロパティが"true"と設定されているので、その時点でバブルアップを終了する。

<body onclick="alert('BODYがクリックされました')">
<div onclick="alert('DIVがクリックされました')">
  <p onclick="alert('Pがクリックされました')">例 １：
    <span onclick="alert('SPANがクリックされました')">
      <button  onclick="alert('BUTTONがクリックされました')">
        ここをクリックしてください
</button></span></p></div>


<div>
  <p onclick="alert('Pがクリックされました')">例 ２：
    <span><button>ここをクリックしてください
</button></span></p></div>


<div onclick="alert('DIVがクリックされました')">
  <p onclick="alert('Pがクリックされました');event.cancelBubble = true;">例 ３：
    <span onclick="alert('SPANがクリックされました')">
      <button  onclick="alert('BUTTONがクリックされました')">
         ここもクリックしてみてください
</button></span></p></div>

end(03/7/18)