イベントバブリングが複数回トリガーされるのはなぜですか?

イベントのバブリングが 2 回トリガーされるのはなぜですか?

フロントエンド開発では、イベント バブリングの概念によく遭遇します。イベント バブリングとは、要素の特定のイベントがページ上でトリガーされると、そのイベントが最終的にドキュメント オブジェクトに渡されるまで、レイヤーごとに上の要素に渡されることを意味します。

ただし、イベント リスナーを 1 回バインドしただけでも、イベントのバブリングとトリガーが 2 回発生するという問題が発生する場合があります。では、なぜ繰り返しトリガーという現象が起こるのでしょうか？以下で考えられる理由を見ていきましょう。

まず最初に、ブラウザ内でイベント バブリングがどのように機能するかという概念を明確にする必要があります。ブラウザーが要素上で特定のイベントをトリガーすると、その要素から開始して DOM ツリーを走査し、各親要素にイベントにバインドされたイベント ハンドラーがあるかどうかを確認します。イベント ハンドラーが見つかった場合、ブラウザはそのハンドラーを実行し、ドキュメント オブジェクトまでのトラバースを続行します。このプロセスがイベント バブリングです。

ただし、イベント バブリングは親要素だけでなく、祖先要素にも渡されることに注意してください。つまり、イベント バブリングにより、親要素と祖先要素のイベント ハンドラーが繰り返しトリガーされます。これにより、イベントが 2 回トリガーされる可能性があります。

そこで問題は、なぜイベントのバブリングが祖先要素に伝わるのかということです。これは、イベント リスナーをバインドするときに、通常はイベント委任を使用するためです。つまり、イベント リスナーを親要素にバインドし、イベント バブリングを通じて子要素の代わりに親要素にイベントを処理させます。

バインドするイベント リスナーが親要素と祖先要素の両方に存在する場合、イベント バブリングは 2 回トリガーされます。これは、ブラウザが DOM ツリーを上に移動するときに、各親要素と祖先要素に同じイベント ハンドラーがバインドされているかどうかを確認するためです。存在する場合、ブラウザはそれらを実行します。

この問題をよりよく理解するために、具体的なコード例を以下に示します。

HTML コード:

<div id="parent">
  <div id="child">Click me!</div>
</div>

JavaScript コード:

var parent = document.getElementById('parent');
var child = document.getElementById('child');

parent.addEventListener('click', function() {
  console.log('Parent Clicked!');
});

child.addEventListener('click', function() {
  console.log('Child Clicked!');
});

上記コードでは、親要素と子要素の両方でクリック イベントのイベント リスナーをバインドします。子要素をクリックすると、コンソールには「Child Clicked!」と「Parent Clicked!」という結果が 2 回出力されます。これは、イベント バブリングが 2 回トリガーされるためです。最初に子要素のイベント リスナーが実行され、次に親要素のイベント リスナーが実行されます。

イベントのバブルが 2 回トリガーされる問題を回避するために、stopPropagation() メソッドを使用して、イベントがバブルアップし続けるのを防ぐことができます。たとえば、上記のコードでは、子要素のイベント リスナーにコード行を追加できます。

child.addEventListener('click', function(event) {
  console.log('Child Clicked!');
  event.stopPropagation();
});

stopPropagation() メソッドを使用した後は、子要素のイベント リスナーのみが実行されます。および親要素のイベント リスナーは実行されなくなります。このようにして、イベントのバブリングと 2 回のトリガーの問題を回避できます。

要約すると、イベント バブリングが 2 回トリガーされる理由は、イベント バブリングが親要素と祖先要素のイベント ハンドラーに渡されるためです。この問題を解決するには、stopPropagation() メソッドを使用して、イベントが上向きにバブリングするのを防ぎます。

この記事の紹介を通じて、読者がイベント バブリングの原理とイベント バブリングが 2 回トリガーされる理由をより包括的に理解し、実際の開発でこの問題に遭遇したときに効果的な解決策を見つけられることを願っています。方法。

以上がイベントバブリングが複数回トリガーされるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。