イベントバブリングメカニズムが 2 回トリガーされるのはなぜですか?-jsチュートリアル-php.cn

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

イベントのバブリングが 2 回連続して発生するのはなぜですか?

イベントバブリングは Web 開発における重要な概念です。これは、ネストされた HTML 要素でイベントがトリガーされると、イベントが最も内側の要素から最も外側の要素までバブルアップすることを意味します。このプロセスは時々混乱を引き起こす可能性があり、よくある問題の 1 つは、イベントのバブリングが 2 回続けて発生することです。

イベントバブリングが 2 回連続して発生する理由をより深く理解するために、まずコード例を見てみましょう:

<div id="outer">
  <div id="inner">
    <button id="button">Click me</button>
  </div>
</div>

<script>
document.getElementById('button').addEventListener('click', function() {
  console.log('Button clicked');
});

document.getElementById('inner').addEventListener('click', function() {
  console.log('Inner div clicked');
});

document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer div clicked');
});
</script>

ログイン後にコピー

上記のコードは、最も外側の ## を含むネストされた HTML 構造を作成します。 #

要素 (id="outer")、ネストされた >gt; 要素 (id="inner")、および Button 要素 (id="button")。

このコードでは、各要素のクリックイベントリスナーを追加して、対応する要素のクリックに関する情報を出力します。ページ上のボタンをクリックすると、予期される出力は次のようになります:

Button clicked
Inner div clicked
Outer div clicked

ログイン後にコピー

ただし、実際の出力は次のようになります:

Button clicked
Inner div clicked
Outer div clicked
Inner div clicked
Outer div clicked

ログイン後にコピー

ご覧のとおり、イベントバブリングが 2 回続けて発生します。 . 回、イベント処理関数が繰り返し実行されます。

この問題の根本原因は、イベントバブリングフェーズの実行順序にあります。バブリングフェーズでは、イベントは最も内側の要素から外側の要素までバブルアップし、親要素のイベントハンドラー関数を段階的に実行します。したがって、ボタンをクリックすると、クリックイベントは最初にボタンのイベントハンドラーをトリガーし、次にネストされた

要素までバブルアップして、要素のイベントハンドラーの実行を継続します。ただし、

要素は最も外側の

 要素にもネストされているため、イベントは再び最も外側の要素までバブルアップされ、その結果、最も外側のイベント ハンドラーが生成されます。関数が再度実行されます。

この問題を解決するには多くの方法があります。一般的に使用される 2 つの方法を紹介します:

In Calling the

イベント処理関数のevent.stopPropagation()メソッドを使用すると、イベントのさらなる伝播を防ぐことができます。つまり、イベントのバブリングを停止できます。上記のコード例のボタンのイベントハンドラー関数を次のように変更します。

document.getElementById('button').addEventListener('click', function(event) {
  console.log('Button clicked');
  event.stopPropagation(); // 阻止事件冒泡
});

ログイン後にコピー

event.stopPropagation() メソッドを使用した後、イベントのバブリングはボタン要素で停止し、ネストされた

要素と最も外側の

 要素では、埋め込み要素には伝播されません。したがって、イベント処理関数は 1 回だけ実行され、出力結果は次のようになります。

Button clicked

ログイン後にコピー

イベントバブリングフェーズに加えて、DOMイベントには別のキャプチャフェーズがあります。キャプチャフェーズは、最も外側の要素から内側の要素にイベントが伝播するプロセスを指します。キャプチャフェーズを使用すると、最も外側の要素にイベントリスナーを追加し、キャプチャフェーズでイベントを処理してから、他の要素でイベントハンドラを実行するかどうかを決定できます。上記のコード例の最も外側の

要素のイベントハンドラー関数を次のように変更します。

document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer div clicked');
}, true); // 添加 true 参数表示监听捕获阶段

ログイン後にコピー

パラメータ

true を最も外側の要素 Event に追加します。リスナーはキャプチャフェーズ中にイベント処理関数を実行できます。このようにして、イベントのバブリング段階では、イベントによって最も外側の要素のイベント処理関数が再度トリガーされることがなくなり、繰り返しの実行が回避されます。

要約すると、バブリングフェーズ中にイベントが最も内側の要素から最も外側の要素にバブリングし、各要素のイベント処理関数が実行されるため、イベントバブリングが 2 回連続で発生します。この問題を解決するには、

event.stopPropagation() メソッドを使用してイベントのバブリングを防ぐか、キャプチャフェーズをリッスンしてイベントを処理して繰り返し実行を避けることができます。

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

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

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