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

JavaScriptのイベントのバブリングとキャンセルのサンプルです。
「イベントのバブリング」は、「イベントの伝播」ともいいます。
「イベントのキャンセル」は、「イベントの抑制」ともいいます。
イベントのバブリングのキャンセルはstopPropagationメソッドを使用します。

目次

イベントのバブリング

コード

イベントのバブリングのサンプルです。
2行目の「一段目」という文字をクリックすると10行目のイベントリスナが実行されます。
3行目の「二段目」という文字をクリックすると13行目のイベントリスナが実行された後、10行目のイベントリスナも実行されます。
→イベント伝播(バブリング)です。

<body>
<div id="d1">一段目
		<div id="d2">二段目</div>
</div>
</body>
<script>
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');

d1.addEventListener("click",function(e){ 
	alert("一段目のイベントリスナ");
});
d2.addEventListener("click",function(e){ 
	alert("二段目のイベントリスナ");
});
</script>

サンプル1

上記コードのサンプルです。
二段目をクリックすると、イベントの伝播のためアラートが2つ表示されます。

一段目

二段目

イベントのバブリングをキャンセルする

15行目にstopPropagationメソッドを追加しています。
3行目の「二段目」という文字クリックすると13行目のイベントリスナが実行された後、10行目のイベントリスナは実行されません。

<body>
<div id="d3">一段目
		<div id="d4">二段目</div>
</div>
</body>
<script>
var d3 = document.getElementById('d3');
var d4 = document.getElementById('d4');

d3.addEventListener("click",function(e){ 
	alert("一段目のイベントリスナ");
});
d4.addEventListener("click",function(e){ 
	alert("二段目のイベントリスナ");
	e.stopPropagation();
});
</script>

サンプル2

上記コードのサンプルです。
サンプル1と違い、二段目をクリックしてもアラートは1つしか表示されません。

一段目

二段目

関連の記事

JavaScript ID値を指定して要素ノードを取得するサンプル(getElementById)
JavaScript タグ名を指定して要素ノードを取得するサンプル(getElementsByTagName)
JavaScript クラス名を指定して要素ノードを取得するサンプル(getElementsByClassName)
JavaScript 相対的な関係でノードを取得するサンプル(childNodes)
JavaScript 属性値を取得/設定するサンプル(getAttributeとsetAttribute)
JavaScript 要素ノードを追加/削除するサンプル(createElementとremoveChild)
JavaScript ノードを置換するサンプル(replaceChild)
JavaScript イベントリスナを登録するサンプル(addEventListener)
JavaScript イベントリスナを削除するサンプル(removeEventListener)

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る