イベントのバブリングとキャプチャ - 5 歳のように学習します-jsチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-09-22 18:32:09

オリジナル

467 人が閲覧しました

Event Bubbling and Capturing - Learn like you are 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 を渡すと、バブリングフェーズは妨げられません。 キャプチャ中に

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