はじめに
JavaScriptの学習を進めていく中で、バブリングと呼ばれる現象に遭遇しました。
そこで、バブリングについての概要と、その対処法についてここに記します。
バブリングとは
DOMツリー内でイベントが発生したときに、そのイベントが階層構造に沿って下位の要素から上位の要素へと伝播していく仕組みを指します。
JavaScriptでのイベント処理には、以下の3つのフェーズがあります。
- 1. キャプチャリングフェーズ
- イベントがDOMツリーの上位から下位へ伝播します。つまり、windowやdocumentのようなトップレベルの要素から、イベントが発生した具体的な要素までたどり着きます。
- 2. ターゲットフェーズ
- イベントが発生した要素（ターゲット）で実際に処理が行われます。
- 3. バブリングフェーズ
- イベントが下位の要素から上位の要素に向かって再び伝播していきます。このフェーズが「バブリング」に該当します。
例：以下のコードで、バブリングの動作を確認できます。
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
// 親要素にイベントリスナーを設定
document.getElementById('parent').addEventListener('click', function() {
console.log('Parent clicked');
});
// 子要素にイベントリスナーを設定
document.getElementById('child').addEventListener('click', function() {
console.log('Child clicked');
});
</script>
1. ボタン#childをクリックすると、最初に「Child clicked」が表示されます。これは、イベントがターゲットフェーズで子要素が処理されるためです。
2. 次に、「Parent clicked」が表示されます。これは、イベントがバブリングフェーズで親要素に伝播し、親要素のイベントリスナーが実行されるためです。
バブリングの制御
バブリングを止めたい場合、イベントリスナーのコールバック関数内でevent.stopPropagation()を使います。
document.getElementById('child').addEventListener('click', function(event) {
console.log('Child clicked');
event.stopPropagation(); // バブリングを止める
});
このコードを追加すると、#childをクリックしても親要素にはイベントが伝播しなくなり、「Parent clicked」は表示されません。
まとめ
- バブリング
- イベントが下位要素から上位要素に伝播していく仕組み。
- stopPropagation
- バブリングやキャプチャリングを途中で停止させるメソッド。
バブリングをうまく活用することで、複数のイベントを効率的に扱えるようになります。