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

JavaScriptバブリングのイラスト JS
この記事は約8分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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>

●注意点と対処法

バブリングを利用する際には、下記の点に注意が必要です。

  1. イベントが無限に伝播しないよう、適切なタイミングでバブリングを停止する。
  2. クリックイベントなどのデフォルトの動作を防ぐ場合は、e.preventDefault()を使用する。
  3. イベントキャプチャリングとバブリングを適切に使い分ける。

●カスタマイズ方法

バブリングを活用することで、イベント処理を簡潔かつ効率的に実装することができます。

イベント伝播の仕組みを理解し、適切にカスタマイズして、アプリケーションに合った実装を行いましょう。

まとめ

イベントのバブリングは、イベントが子要素から親要素へと伝播する現象です。

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

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

バブリングとイベントキャプチャリングを適切に使い分けて、イベント処理を最適化しましょう。