JavaScriptのイベントのバブリングとキャンセルのサンプルです。
目次
バブリング | イベントのバブリング |
イベントのバブリングをキャンセルさせる |
イベントのバブリング
- イベントのバブリングとは、発生したイベントが上位の要素に伝播することです。
- 「イベントの伝播」ともいいます。
- 以下は、MDNのイベント伝播 (propagation)のリンクです。
https://developer.mozilla.org/ja/docs/DOM/DOM_Reference/Examples#Example_5.3A_Event_Propagation
イベントのバブリングのサンプル
一段目をクリックすると、アラートが表示されます。
二段目をクリックすると、イベントの伝播のためアラートが2つ表示されます。
一段目
二段目
上記サンプルのコードです。
<div id="div1">一段目
<div id="div2">二段目</div>
</div>
<script>
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
div1.addEventListener("click",function(e){
alert("一段目のイベントリスナ");
});
div2.addEventListener("click",function(e){
alert("二段目のイベントリスナ");
});
</script>
2行目の「一段目」という文字をクリックすると10行目のイベントリスナが実行されます。
3行目の「二段目」という文字をクリックすると13行目のイベントリスナが実行された後、10行目のイベントリスナも実行されます。
→イベントの伝播(バブリング)です。
イベントのバブリングをキャンセルさせる
イベントオブジェクト.stopPropagation(); |
- イベントのバブリングのキャンセルはstopPropagationメソッドを使用します。
- イベントオブジェクトのメソッドです。
- 「イベントのキャンセル」は、「イベントの抑制」ともいいます。
- 以下は、MDNのstopPropagationのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation
キャンセルのサンプル
一段目をクリックすると、アラートが表示されます。
二段目をクリックしても、イベントのバブリングのキャンセルをしているため、アラートは1つしか表示されません。
一段目
二段目
上記サンプルのコードです。
<div id="div3">一段目
<div id="div4">二段目</div>
</div>
<script>
const div3 = document.getElementById("div3");
const div4 = document.getElementById("div4");
div3.addEventListener("click",function(e){
alert("一段目のイベントリスナ");
});
div4.addEventListener("click",function(e){
alert("二段目のイベントリスナ");
e.stopPropagation();
});
</script>
15行目にstopPropagationメソッドを追加しています。
3行目の「二段目」という文字クリックすると13行目のイベントリスナが実行された後、10行目のイベントリスナは実行されません。
関連の記事
JavaScript イベントリスナを登録するサンプル(addEventListener)
JavaScript イベントリスナを削除するサンプル(removeEventListener)
JavaScript イベントを無効化する(preventDefault)
JavaScript イベントとイベントハンドラのサンプル