バブリングとは
まず、初めに「バブリング」という言葉について理解しておく必要がありますので一応のおさらいをしておきます。
- ここで説明する bubbling とは次の語句の意味からなる web ページ内で発生するイベントのバブリングのことを言っています。
- bubbling
- 読み: バブリング
意味: 気泡が湧き上がる
バブリングの概要
このページで説明している「バブリング」とは web ページ内の要素で発生するイベントが先祖要素にバインドされた同種のイベントを誘発させる現象のことをいいます。 一般的な意味としては「気泡が湧き上がる」様を指した言葉ですが、ここでは「気泡」を「イベント」に見立てて、イベントが誘発される現象のことだと捉えてください。
例えば、webページ上にある要素をマウスでクリックすると「クリックイベント」が発生します。 この時、その要素の先祖要素らに事前に「クリックイベント」の関数が登録してあった場合に、子要素のイベント発生が引き金になり、先祖要素のクリックイベントにアタッチされている関数も実行されるというものです。
バブリングは伝播していく性質があるので、「子要素で発生」→「親要素で発生」→「お爺さん要素で発生」という具合に発生元の要素に近い方から先祖方向に向かって順次、伝播します。
言葉で説明すると、少し理解しにくいかもしれませんので、次のセクションで動作するサンプルを用意します。
イベントのバブリング 【動作サンプル】
ここでは、クリックイベントを題材にしたバブリングのサンプルを用意しました。 子要素で「クリックイベント」が発生した時に、先祖要素らでも「クリックイベント」が順次、発生している様子を見て下さい。
サンプルをクリックされて理解できたでしょうか。 実際に [Lv3] の要素をクリックすると、その要素のid値 ( idLevel_3 ) がアラートに表示されますよね。
では [Lv1] の要素をクリックするとどうでしょうか。 アラートが 3回表示されますよね。この時に表示される id値 を見てください。 最初は ( idLevel_1 )、次に ( idLevel_2 )、最後に ( idLevel_3 ) と順次に表示されています。
つまり、子要素から先祖要素の方向に クリックイベントの発生が伝播しているということが確認できると思います。 もちろん、これは3つの要素のクリックイベントに関数をアタッチしているから起こることであり、例えば [Lv2] のクリックイベントに関数をアタッチしていない場合は、 ( idLevel_1 ) → ( idLevel_3 ) と伝播するように見えることになります。
それでは、次にサンプルのコードを掲載しておきますので理解の参考にしてください。
サンプルコード: CSS
<style>
#idLevel_3, #idLevel_2, #idLevel_1{
padding: 2em 4em;
cursor: pointer;
}
#idLevel_3{
background-color: ##lightblue;
}
#idLevel_2{
background-color: ##lightskyblue;
}
#idLevel_1{
background-color: ##royalblue;
}
</style>
サンプルコード: HTML
<body>
<div id="idLevel_3"> Lv3
<div id="idLevel_2"> Lv2
<div id="idLevel_1"> Lv1 </div>
</div>
</div>
<script>...</script>
</body>
サンプルコード: script
<script>
document.querySelector("#idLevel_3").addEventListener(
"click",
function(){
window.alert(this.id);
}
);
document.querySelector("#idLevel_2").addEventListener(
"click",
function(){
window.alert(this.id);
}
);
document.querySelector("#idLevel_1").addEventListener(
"click",
function(){
window.alert(this.id);
}
);
</script>
イベントのバブリング 【補足】
このページでは「クリックイベント」をサンプルの題材にしました。 このクリックイベントというのはバブリングを起こすことが分かったと思います。
しかし、バブリングを起こすイベントには、反対にバブリングを起こさないタイプの同じようなイベントが用意されていることもあります。 つまり、このバブリングというのは、そのような機能であり、その機能を除いた同タイプのイベントもあるということです。
ただし、バブリング機能を除いた、同じタイプのイベントが無い場合もあります。 その場合はメソッドのコールバック値からイベントオブジェクトを取得して関数の処理に使う (コールバック関数) ことで、 バブリングを強制的に止めることもできますので以下に サンプルコードを掲載しておきます。
なお、このサンプルは前セクションのものにコードを追加したものです。
サンプルコード: script
<script>
document.querySelector("#idLevel_3_STOP").addEventListener(
"click",
function(event){
event.stopPropagation();
window.alert(this.id);
}
);
document.querySelector("#idLevel_2_STOP").addEventListener(
"click",
function(event){
event.stopPropagation();
window.alert(this.id);
}
);
document.querySelector("#idLevel_1_STOP").addEventListener(
"click",
function(event){
event.stopPropagation();
window.alert(this.id);
}
);
</script>