イベントのバブリングとキャプチャ - 5 歳のように学習します

さあ、「5 歳のように学べ」というのは単なるフレーズです。ここでおもちゃの物語を話しているわけではありません。しかし、最初から最後まで注意深く読めば、すべて意味が分かると約束します。

イベントのバブリングとキャプチャは、JavaScript でイベントがトリガーされたときにイベントが DOM (ドキュメント オブジェクト モデル) を介してどのように伝播 (または移動) するかを示す 2 つのフェーズです。さて、このステートメントでは、イベントの伝播の概念を明確にする必要があります。

イベントの伝播

div 内のボタンなどの要素でイベントが発生する場合、イベントはそのボタンでだけ発生するわけではありません。イベントは、イベントの伝播として知られるプロセスで DOM を通過します。このプロセスは 2 つの主なフェーズで発生します:

• イベントキャプチャ (「トリクリング」とも呼ばれます)

• イベントバブリング

さあ、お分かりいただけたでしょうか。両方を例を挙げて理解しましょう。

イベントバブリング

イベント バブリングとは、要素でイベントが発生すると、まずその要素のイベント ハンドラーがトリガーされることを意味します。次に、DOM ツリー内を上に移動して、親要素のイベント ハンドラーをトリガーするなどして、ドキュメントまたは DOM ツリーのルートに到達します。

<div id="parent" style="padding: 20px; background-color: lightblue;">
  Parent Div
  <button id="child">Click Me!</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('Parent Div Clicked!');
  });

  document.getElementById('child').addEventListener('click', function(event) {
    alert('Button Clicked!');
    // event.stopPropagation(); // If you want to stop bubbling, uncomment this line
  });
</script>

説明例: ボタンをクリックすると、「ボタンがクリックされました!」と表示されます。イベントがボタンでトリガーされるため、アラートが最初に表示されます。その後、イベントが親 div まで「バブル」し、「Parent Div Clicked!」というメッセージが表示されます。警告。これは、イベントがボタンから始まり、その親 div まで進むためです。したがって、この伝播プロセスは「イベント バブリング」と呼ばれます。

イベントのキャプチャ

イベントのキャプチャはバブリングの逆です。イベントは Web ページの上部 (ドキュメントから始まる) から始まり、操作した要素に向かって下に移動します。これは、親要素のイベント ハンドラーが最初にトリガーされ、イベントはクリックまたは操作された子要素に移動することを意味します。

<div id="parent" style="padding: 20px; background-color: lightgreen;">
  Parent Div
  <button id="child">Click Me!</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('Parent Div Clicked!');
  }, true); // 'true' makes this event handler run during the capturing phase

  document.getElementById('child').addEventListener('click', function() {
    alert('Button Clicked!');
  });
</script>

この場合、ボタンをクリックすると、「Parent Div Clicked!」というメッセージが表示されます。アラートが最初に表示されます。すると、「ボタンがクリックされました！」イベントがドキュメント レベルから開始され、最初に親 div までキャプチャ (少しずつ) され、その後ボタンに到達するため、アラートが表示されます。

addEventListener の 3 番目の引数の値 true は、キャプチャフェーズの決定子です。

すべてのイベントは 3 つのフェーズを経ます

当然、すべてのイベントは 3 つのフェーズすべてを通過します:

• キャプチャフェーズ: イベントは先頭 (ドキュメント) から始まり、ターゲットまで下に移動します。

• ターゲット フェーズ: イベントは、対話した要素 (ターゲット) に到達します。

• バブリング フェーズ: ターゲットに到達すると、イベントは親要素を介してバブリングして戻ります。

そうです、イベントは自然に 3 つのフェーズすべてを通過しますが、 JavaScript を使用すると、イベント リスナーがどのフェーズで動作するかを制御できます。

イベントは 3 つのフェーズすべてを通過しますが、JavaScript のイベント リスナーはデフォルトでバブリング フェーズに接続されます。つまり、何も指定せずにイベント リスナーを追加すると、イベント リスナーはバブリング段階でのみ (イベントがターゲットに到達し、上昇を開始した後)

でイベントをリッスンします。

3 番目の引数として true を渡すと、キャプチャ フェーズ中 (DOM を通過するとき) イベントをリッスンするように JavaScript に指示します。イベントはすべてのフェーズ (キャプチャ、ターゲット、バブリング) を通過しますが、リスナーはイベントがターゲット要素に到達する前のキャプチャ フェーズ

中にトリガーされます。

true を使用すると、イベントはキャプチャからバブリングに移行しますか?いいえ、イベントは常にキャプチャとバブリングの両方を介して進行します。 true を渡すと、バブリングフェーズは妨げられません。 キャプチャ中に

応答するようにリスナーに指示しているだけです。イベントは通常どおり、ターゲットまでの捕獲とバブリングから続行されます。

概要

:

• すべてのイベントは、キャプチャ、ターゲット、バブリングの各フェーズを自然に通過します

  。

• デフォルトでは、イベント リスナーはバブリング フェーズ中に動作します

  (イベントがターゲットに到達して上向きに移動した後)。

• true を渡すと、イベント リスナーに キャプチャ フェーズ中に

  (イベントが下に移動するときに) をトリガーするように指示します。

• イベントは引き続きすべてのフェーズ (キャプチャ、ターゲット、バブリング) を通過しますが、どのフェーズで行動するかはリスナーが決定します。

以上がイベントのバブリングとキャプチャ - 5 歳のように学習しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。