JavaScript イベントのバブリング (propagation)のサンプル

2022年10月12日

環境
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」が表示されます。

JavaScript

Posted by arkgame

関連記事: