JavaScript イベントのバブリングとキャンセル(stopPropagation)

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行目のイベントリスナは実行されません。