イベントが複数回バブルしてトリガーされるのはなぜですか?-jsチュートリアル-php.cn

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

王林

リリース： 2024-02-19 15:46:06

オリジナル

599 人が閲覧しました

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

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

イベントのバブリングは、Web 開発では一般的な現象です。これは、要素上のイベントがトリガーされると、そのイベントが要素からバブルアップし、その親要素上で同じイベントが順番にトリガーされることを意味します。ただし、バブリングプロセス中にイベントが 2 回トリガーされる場合があります。なぜこれが起こるのかをより深く理解するには、イベントバブリングの原理から始めて、特定のコード例を使用してそれを分析する必要があります。

イベントバブリングの原理は DOM ツリー構造に基づいており、HTML ドキュメントでは、すべての要素がネストされた関係に従ってツリー構造に編成されます。イベントがトリガーされると、イベントは、イベントが発生した要素から親要素に沿ってルート要素に到達するまでバブルアップします。バブリングプロセス中、イベントは各親要素に対して同じイベントハンドラーを順番にトリガーします。この設計の利点は、イベント委任処理を簡単に実行でき、自然なイベントフローを実現できることです。

ただし、主にイベント処理関数の不適切なバインドまたは不完全なイベント防止メカニズムが原因で、イベントバブリングが 2 回トリガーされます。具体的なコード例を見てみましょう:

<!DOCTYPE html>
<html>
<head>
  <title>事件冒泡示例</title>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <button id="btn">Click me!</button>
    </div>
  </div>

  <script>
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    var btn = document.getElementById('btn');

    outer.addEventListener('click', function() {
      console.log('Outer clicked!');
    });

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

    btn.addEventListener('click', function() {
      console.log('Button clicked!');
      event.stopPropagation();
    });
  </script>
</body>
</html>

ログイン後にコピー

この例では、2 つのネストされたレベルを持つ div 要素と、最も内側の div 内にネストされたボタンがあります。クリックイベントハンドラーを各 div 要素とボタンにバインドし、対応する情報をコンソールに出力します。

ボタンをクリックしたとき、「ボタンがクリックされました!」が 1 回だけ出力されると予想されるかもしれませんが、実際には 2 回出力されていることがわかります。これは、イベントバブリングプロセス中に、イベントが各親要素のイベントハンドラーを順番にトリガーするためです。つまり、ボタンがクリックされると、ボタンのクリックイベントハンドラーが最初にトリガーされ、次に最も内側の div 要素がトリガーされます。そして、最も外側の div 要素のイベントハンドラー関数。ボタンのイベントハンドラーで event.stopPropagation() メソッドを呼び出したので、このメソッドはイベントのバブルアップを防ぎます。ただし、イベントハンドラー内でこのメソッドを呼び出しても、後続のイベントハンドラーの実行は妨げられないため、最も内側の div 要素のイベントハンドラーは 1 回トリガーされます。

この問題を解決するには、ボタンのイベント処理関数で event.stopImmediatePropagation() メソッドを使用します。このメソッドは、イベントのバブリングを防ぐだけでなく、バブリングを防ぐこともできます。後続のイベント処理関数が実装されます。コードを次のように変更します。

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

ログイン後にコピー

これにより、ボタンをクリックしたときに、「ボタンがクリックされました!」が 1 回だけ出力されます。

要約すると、主にイベント処理関数の不適切なバインドまたは不完全なイベント防止メカニズムが原因で、イベントバブリングが 2 回トリガーされます。イベントのバブリングと実行を制御するには、event.stopPropagation() メソッドと event.stopImmediatePropagation() メソッドを正しく使用する必要があります。イベントバブリングの原理とメカニズムを理解することによってのみ、イベントバブリングによって引き起こされる問題に適切に対処し、Web アプリケーションのユーザーエクスペリエンスを向上させることができます。

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