JavaScript イベントのバブリング (propagation)のサンプル
環境
Google Chrome 106.0.5249.91
Windows 10 Home 64bit
構文
const 変数名= document.getElementById(セレクター名);
変数名.addEventListener(“click",function(e){処理コード});
イベントのバブリングとは、発生したイベントが上位の要素に伝播することです。
使用例
<!DOCTYPE html>
<html>
<body>
<div id="cftA">AA
<div id="cftB">BB</div>
</div>
<script>
const cftA = document.getElementById("cftA");
const cftB = document.getElementById("cftB");
// 要素「cftA」イベントのバブリング
cftA.addEventListener("click",function(e) {
alert("イベントリスナ11");
});
// 要素「cftB」イベントのバブリング
cftB.addEventListener("click", function (e) {
alert("イベントリスナ22");
});
</script>
</body>
</html>
実行結果
「AA」をクリックすると、アラート「イベントリスナ11」が表示されます。
「BB」をクリックすると、アラート「イベントリスナ22」が表示されます。