JavaScript/イベント/フェーズ/バブリング

JavaScript/イベント/フェーズ/バブリング

イベント発生源から親要素に向かってイベントが上昇するように伝播するイメージ。 水の底で発生した空気が上に上る泡のような感じ。

このような構造で一番内部の hoge をクリックした場合

<div>
    <div>
        <div>hoge</div>
    </div>
</div>

イベントは当然クリックした要素で発生するのだが、その後に外の div またその外の div と外側方向に伝播していく。 これはデフォルトで有効になっているので親子関係のものに同一のイベントをフックしているとこれを考慮してないと予期せぬ動きになる。

バブリングの抑止

e.stopPropagation();
javascript/ope/dom_ope/event/phase/bubbling.txt · 最終更新: 2020-08-26 12:22 by ore