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>

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>

<!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>

<!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

関連投稿: