JavaScriptバブリングを完全攻略！5選の使い方とサンプルコード

はじめに
●JavaScriptバブリングとは
- ○イベント伝播の仕組み
●バブリングの使い方
- ○サンプルコード1：クリックイベントのバブリングを利用
- ○サンプルコード2：親要素でイベントを処理
●バブリングを制御する方法
- ○サンプルコード3：バブリングの停止
- ○サンプルコード4：イベントキャプチャリングを利用
●バブリングの応用例
- ○サンプルコード5：複数の要素でバブリングを活用
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptバブリングを使ったイベント処理の方法がマスターできます。

初心者にも分かりやすい説明とサンプルコードで、バブリングの仕組みや使い方、注意点を学びましょう。

●JavaScriptバブリングとは

JavaScriptバブリングは、DOM要素で発生したイベントが、親要素へと順に伝播していく仕組みのことです。

この仕組みを理解することで、効率的なイベント処理が可能になります。

○イベント伝播の仕組み

イベント伝播は、イベントキャプチャリングとバブリングの2つのフェーズに分かれます。

イベントキャプチャリングでは、イベントが親要素から子要素に向かって伝播し、バブリングでは子要素から親要素に向かって伝播します。

●バブリングの使い方

バブリングを活用することで、親要素で子要素のイベントをまとめて処理することができます。

これにより、コードがシンプルになり、効率的なイベント処理が可能になります。

○サンプルコード1：クリックイベントのバブリングを利用

このコードでは、親要素にイベントリスナーを設定し、子要素のクリックイベントをバブリングを使って処理しています。

この例では、ボタンがクリックされると、親要素のイベントリスナーが反応し、クリックされたボタンの情報を表示します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルコード1</title>
</head>
<body>
<div id="container">
  <button id="button1">ボタン1</button>
  <button id="button2">ボタン2</button>
</div>
<script>
  const container = document.getElementById("container");
  container.addEventListener("click", (e) => {
    console.log("クリックされたボタン:", e.target.id);
  });
</script>
</body>
</html>

○サンプルコード2：親要素でイベントを処理

このコードでは、親要素にイベントリスナーを設定し、子要素のクリックイベントをバブリングを使って処理しています。

この例では、リストの項目がクリックされると、親要素のイベントリスナーが反応し、クリックされた項目のテキストをアラートで表示します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルコード2</title>
</head>
<body>
<ul id="list">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>
<script>
  const list = document.getElementById("list");
  list.addEventListener("click", (e) => {
    if (e.target.tagName === "LI") {
      alert(`クリックされた項目: ${e.target.textContent}`);
    }
  });
</script>
</body>
</html>

●バブリングを制御する方法

バブリングが不要な場合や、特定の条件でバブリングを停止したい場合には、イベントオブジェクトのstopPropagation()メソッドを利用します。

○サンプルコード3：バブリングの停止

このコードでは、子要素のクリックイベントを処理した後、バブリングを停止しています。

この例では、子要素のボタンがクリックされると、イベントが親要素に伝播しないようにバブリングを停止しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルコード3</title>
</head>
<body>
<div id="container">
  <button id="button1">ボタン1</button>
</div>
<script>
  const button1 = document.getElementById("button1");
  const container = document.getElementById("container");

  button1.addEventListener("click", (e) => {
    console.log("ボタン1がクリックされました");
    e.stopPropagation();
  });

  container.addEventListener("click", () => {
    console.log("コンテナがクリックされました");
  });
</script>
</body>
</html>

○サンプルコード4：イベントキャプチャリングを利用

イベントキャプチャリングは、バブリングとは逆に、イベントが外側から内側に伝播する処理です。

このコードでは、親要素でイベントキャプチャリングを利用して、子要素のクリックイベントを処理しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルコード4</title>
</head>
<body>
<div id="container">
  <button id="button1">ボタン1</button>
</div>
<script>
  const container = document.getElementById("container");

  container.addEventListener("click", () => {
    console.log("コンテナがキャプチャリングされました");
  }, true);

  button1.addEventListener("click", () => {
    console.log("ボタン1がクリックされました");
  });
</script>
</body>
</html>

●バブリングの応用例

バブリングを活用することで、コードをシンプルにし、効率的にイベント処理を行うことができます。

○サンプルコード5：複数の要素でバブリングを活用

このコードでは、バブリングを使って複数のボタン要素のイベントを一つのイベントリスナーで処理しています。

この例では、どのボタンがクリックされたかを識別して、アラートで表示します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルコード5</title>
</head>
<body>
<div id="container">
  <button data-action="action1">アクション1</button>
  <button data-action="action2">アクション2</button>
  <button data-action="action3">アクション3</button>
</div>
<script>
  const container = document.getElementById("container");

  container.addEventListener("click", (e) => {
    const clickedButton = e.target;
    const action = clickedButton.getAttribute("data-action");

    if (action) {
      alert(`アクション: ${action} がクリックされました`);
    }
  });
</script>
</body>
</html>