イベント フロー: バブリングとキャプチャ

これはフロントエンドのインタビューの質問シリーズの投稿 #7 です。準備をレベルアップしたい場合や、常に最新情報を入手したい場合は、Frontend Camp への参加を検討してください。

---

イベントのバブリングとキャプチャは、両方とも DOM (Document Object Model) の伝播メカニズムです。これらのメカニズムは両方とも互いに反対です。

イベントバブリング

イベント バブリングでは、ターゲット要素 (event.target) でハンドラーをトリガーした後、イベントはドキュメントのルート要素に上向き (バブル) に伝播します。その途中で、親要素のすべてのイベント ハンドラーがトリガーされます。

/*
<div>



<p>In the snippet above, when you click the button you'll see the following output in console:<br>
</p>

<pre class="brush:php;toolbar:false">"Button handler"
"Container handler"

まず、ボタンのハンドラーが呼び出され、イベントが開始されたときに、event.target プロパティが button に設定されます。イベントはルート要素に到達する途中で、その親のイベント ハンドラーを呼び出します。

ほぼすべてのイベントがバブルしますが、バブルしないフォーカス イベントなどの例外がいくつかあります。

イベントで stopPropagation() メソッドを呼び出すことでバブリングを停止できます。上記のスニペットのボタンのイベント ハンドラーが伝播を停止すると、コンテナーのイベント ハンドラーは呼び出されません。

btn.addEventListener('click', function(event) {
  console.log('Button handler!');

  // ancestor elements won't receive the event
  event.stopPropagation();
});

target.event プロパティにアクセスすると、イベントを開始した要素にアクセスできます。また、ハンドラーが実行されている要素には、event.currentTarget.
を使用してアクセスできます。

container.addEventListener('click', function(event) {
  console.log('Container handler!'); // 'Container handler!'
  console.log(event.target); // btn
  console.log(event.currentTarget); // container
  console.log(this); // container
});

このキーワードについて詳しく知りたいですか?それについて記事を書きました。

イベントのキャプチャ

これまで写真の半分しか見ていませんでした。上のスニペットのボタンがクリックされたとき、そのイベントを受け取る最初の要素ではありません。 ?

イベント フローは 3 つのフェーズで構成されます:

1. キャプチャフェーズ: イベントはルート要素からターゲット要素に流れます。
2. ターゲットフェーズ: イベントはターゲット要素で受信されます。
3. バブリングフェーズ: イベントがルート要素に伝播し始めます。

デフォルトでは、すべてのイベント ハンドラーはターゲット フェーズとバブリング フェーズ中にのみ呼び出されます。キャプチャフェーズでイベントハンドラーを呼び出すには、3 番目の引数として true を渡します。

el.addEventListener('click', () => {}, true);
// or to be more explicit
el.addEventListener('click', () => {}, { capture: true });

キャプチャフェーズでハンドラーを使用している場合、バブリングフェーズでは呼び出されません。

バブリングと同様に、キャプチャフェーズ中にevent.stopPropagation()が呼び出された場合、イベントはそれ以上、つまりこの場合はDOMの下に流れません。

前に説明したスニペットでは、キャプチャフェーズ中にコンテナが伝播を停止した場合、ボタンのハンドラーは呼び出されません。

/*
<div>



<p>このため、event.stopPropagation() を使用する十分な理由が常に必要になります。複雑な DOM ツリーや深くネストされた DOM ツリーでは、デバッグが難しい予期せぬ問題が発生する可能性があります。</p>
<p>イベントキャプチャは、バブリングに比べてほとんど使用されません。バブリングには、重要なパフォーマンス パターンである「イベント委任」など、多くのユースケースがあります。</p>

<p>この投稿は、次のトピックであるイベントの委任の基礎を築きます。よく理解してください。疑問がありますか?コメントに残してください。 ✌️</p>


<hr>

<h2>
  
  
  まとめ
</h2>

<ol>
<li>イベント フローは、キャプチャ フェーズ、ターゲット フェーズ、バブリング フェーズの 3 つのフェーズで構成されます。</li>
<li>キャプチャフェーズでは、イベントはルート要素からターゲット(event.target)要素まで流れます。</li>
<li>バブリングフェーズでは、イベントはターゲット要素からルート要素に流れます。</li>
<li>デフォルトでは、すべてのイベント ハンドラーはターゲット フェーズとバブリング フェーズ中にのみ呼び出されます。</li>
<li>addEventListener 関数の 3 番目の引数を渡すことで、キャプチャ フェーズでハンドラーを設定できます。</li>
<li>イベント フローのどの時点でも、event.stopPropagation() を呼び出すと、イベントのそれ以上のフローが停止します。</li>
</ol>


<hr>

<p>今読んだ内容は気に入りましたか? ?フロントエンド キャンプの待機リストへの参加を検討してください。</p>

<p>いくつかのリアクションを残す「?」この投稿があなたのような他の開発者に役立つように、コメントを投稿してください。 ?</p>


          </div>

            
  

            
        

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