ある要素をクリックしたとき、そのクリックイベントが発生するまでに以下の3フェーズを経ます。
フェーズ | 説明 |
---|---|
キャプチャリングフェーズ | windowオブジェクトからイベントが発生した要素に向かっていくフェーズ |
ターゲットフェーズ | イベントが発生した要素に到着したフェーズ |
バブリングフェーズ | イベントが発生した要素からwindowオブジェクトへ向かって行くフェーズ |
このとき、キャプチャリングフェーズでイベントを実行することをキャプチャリングと呼び、バブリングフェーズでイベントを実行することをバブリングと呼びます。
イベントをキャプチャリングフェースで実行するかバブリングフェースで実行するかはaddEventListener
の第三引数で設定します。
true
を指定する。
false
を指定する。
以降から、実際にバブリングとキャプチャリングの実装例を見ていきます。
親要素(水色の部分)をクリックすると「親です!」とアラートが表示されます。
子要素(緑色の部分)をクリックしても「親です!」とアラートが表示されます。
See the Pen
Bubbling1 by shiakisudev (@shiakisu)
on CodePen.
ソースコードは以下のとおりです。
HTML
<div id="parent">
親
<div id="child">
子
</div>
</div>
CSS
#parent{
height:100px;
width:100px;
background-color:skyblue;
}
#child{
height:50px;
width:50px;
background-color:lime;
}
js
window.onload = function(){
document.getElementById('parent').addEventListener(
'click',function(){
alert('親です!')
},false);
}
親要素(水色の部分)をクリックすると「親です!」とアラートが表示されます。
子要素(緑色の部分)をクリックすると「子です!」とアラートが表示された後に「親です!」とアラートが表示されます。
このように、子要素のイベント発生を契機として親要素のイベントも働くことをバブリングといいます。
See the Pen
Bubbling2 by shiakisudev (@shiakisu)
on CodePen.
ソースコードは以下のとおりです。
js
window.onload = function(){
// 親要素クリック時のイベントリスナー
document.getElementById('parent').addEventListener(
'click',function(){
alert('親です!')
},false);
// 子要素クリック時のイベントリスナー
document.getElementById('child').addEventListener(
'click',function(){
alert('子です!')
},false);
}
子要素クリック時に子要素自身のイベントを先に実行し、親要素へは伝播しないようにするには、子要素のイベントの中でevent.stopPropagation();
を実行する必要があります。
以下の処理では、子要素クリック時に子要素自身のイベント処理が実行され、「子です!」と表示された後、そのまま処理が終了します。
See the Pen
prevent by shiakisudev (@shiakisu)
on CodePen.
ソースコードは以下のとおりです。
js
window.onload = function(){
// 親要素クリック時のイベントリスナー
document.getElementById('parent').addEventListener(
'click',function(){
alert('親です!');
},false);
// 子要素クリック時のイベントリスナー
document.getElementById('child').addEventListener(
'click',function(){
alert('子です!');
event.stopPropagation();//親要素へ伝播しないようにする。
},false);
}
親要素のaddEventListener
にtrue
を設定すると、子要素クリック時に親要素→子要素の順でイベントを実行することができます。これをバブリングといいます。
See the Pen
Bubbling3 by shiakisudev (@shiakisu)
on CodePen.
ソースコードは以下のとおりです。
js
window.onload = function(){
// 親要素クリック時のイベントリスナー
document.getElementById('parent').addEventListener(
'click',function(){
alert('親です!')
},true);
// 子要素クリック時のイベントリスナー
document.getElementById('child').addEventListener(
'click',function(){
alert('子です!')
},false);
}
子要素クリック時に親要素のイベントを先に実行し、子要素へは伝播しないようにするには、親要素のイベントの中でevent.stopPropagation();
を実行する必要があります。
以下の処理では、子要素クリック時に親要素のイベント処理が実行され、「親です!」と表示された後、そのまま処理が終了します。
See the Pen
bubbling4 by shiakisudev (@shiakisu)
on CodePen.
ソースコードは以下のとおりです。
js
window.onload = function(){
// 親要素クリック時のイベントリスナー
document.getElementById('parent').addEventListener(
'click',function(){
alert('親です!')
event.stopPropagation(); //→子要素へ伝播しないようにする。
},true); //→子要素クリック時でも親要素のイベントから始まるようにする。
// 子要素クリック時のイベントリスナー
document.getElementById('child').addEventListener(
'click',function(){
alert('子です!')
},false);
}
以上で記事の解説はお終い!
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!
View Comments