JavaScript でのイベントのバブリングとキャプチャをマスターする

JavaScript でのイベントのバブリングとキャプチャ

JavaScript におけるイベントの伝播は、イベントがトリガーされた後に DOM を介してどのように流れるかを示します。 イベント バブリング と イベント キャプチャ の 2 つの主なフェーズがあります。イベント リスナーを効果的に管理するには、これらの概念を理解することが重要です。

---

1.イベント伝播フェーズ

イベントがトリガーされると、次の順序で DOM を通じて伝播します。

1. キャプチャフェーズ: イベントは、DOM ツリーのルートからターゲット要素まで移動します。
2. ターゲットフェーズ: イベントはターゲット要素に到達します。
3. バブリングフェーズ: イベントはターゲット要素からルートまで戻ります。

---

2.イベントバブリング

バブリングフェーズでは、イベントはターゲット要素から開始され、その先祖を通してバブルアップします。

例:

<div>





<pre class="brush:php;toolbar:false">document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

ボタンをクリックしたときの出力:

Child clicked
Parent clicked

• イベントはボタンから div にバブルアップします。

泡を止める

イベントがさらに伝播するのを防ぐには、stopPropagation() メソッドを使用します。

document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Child clicked");
});

---

3.イベントキャプチャ (Trickling)

キャプチャフェーズでは、イベントは DOM ツリーのルートからターゲット要素まで移動します。

例:

document.getElementById("parent").addEventListener(
  "click",
  function() {
    console.log("Parent clicked");
  },
  true // Enables capturing phase
);

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

ボタンをクリックしたときの出力:

Parent clicked
Child clicked

• イベントは、子に到達する前に親によってキャプチャされます。

---

4.バブリングとキャプチャーの比較

機能 イベントのバブリング イベントのキャプチャ

Feature	Event Bubbling	Event Capturing
Order	From target to ancestors	From root to target
Default Behavior	Enabled	Disabled unless specified
Use Case	Commonly used for delegation	Less commonly used

注文 ターゲットから先祖まで ルートからターゲットまで デフォルトの動作 有効 指定しない限り無効 使用例 委任によく使用されます あまり一般的には使用されません テーブル>

---

5.イベント委任

イベント委任は、イベントバブリングを利用して、複数の子要素のイベントを効率的に処理します。

例:

<div>





<pre class="brush:php;toolbar:false">document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", function() {
  console.log("Child clicked");
});

• ul 上の単一のイベント リスナーが、すべての li 要素のクリックを処理します。

---

6.デフォルト動作の防止

伝播に影響を与えずに要素のデフォルトの動作を停止するには、preventDefault() メソッドを使用します。

例:

Child clicked
Parent clicked

---

7.実用的な使用例: フォームの検証

document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Child clicked");
});

---

8.概要

• イベント バブリングは、ターゲット要素から上位要素までイベントを伝播します。
• イベント キャプチャは、イベントをルートからターゲット要素まで伝播します。
• stopPropagation() を使用して伝播を停止し、preventDefault() を使用してデフォルトのアクションをキャンセルします。
• イベント委任は、動的要素でイベントを効率的に管理するための強力な手法です。

イベントのバブリングとキャプチャをマスターすると、イベント駆動型アプリケーションの制御が向上し、コードの効率が向上します。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。