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

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

イベント バブリング (イベント バブリング) とは、DOM 内で、要素がイベント (クリック イベントなど) をトリガーすると、そのイベントが要素から親要素へ、最上部にバブリングするまでバブルアップされることを意味します。 -レベルのドキュメントオブジェクト。イベント バブリングは DOM イベント モデルの一部であり、これにより開発者はイベント リスナーを親要素にバインドできるため、子要素がイベントをトリガーすると、バブリング メカニズムを通じてイベントをキャプチャして処理できます。

ただし、開発者はイベントがバブルアップして 2 回トリガーされる状況に遭遇することがあります。これは通常、ネストされた要素で発生します。なぜ 2 回トリガーされるのかをより深く理解するために、具体的なコード例を見てみましょう。

HTML コードは次のとおりです:

<div id="parent">
  <div id="child">
    <button id="button">点击我</button>
  </div>
</div>

JavaScript コードは次のとおりです:

var parent = document.getElementById("parent");
var child = document.getElementById("child");
var button = document.getElementById("button");

parent.addEventListener("click", function(event) {
  console.log("父元素被点击");
});

child.addEventListener("click", function(event) {
  console.log("子元素被点击");
});

button.addEventListener("click", function(event) {
  console.log("按钮被点击");
  event.stopPropagation();
});

上記のコードには、親要素、子要素、ボタンがあります。これらはそれぞれ [イベント監視] をクリックするようにバインドされています。 Web ページ上のボタンをクリックすると、バブリング ルールに従ってイベントが子要素から親要素に渡されます。

次に、ボタンのクリックをシミュレートしてみましょう。ボタンをクリックすると、コンソールに次の出力が表示されます。

按钮被点击
子元素被点击

なぜ 2 回トリガーされるのですか?

これは、イベントのバブリングがトリガーとなる要素から開始され、親要素まで順番にバブリングされ、その過程で子要素​​と親要素の 2 つの層を通過するためです。ボタンをクリックすると、最初にボタンのクリック イベントがトリガーされ、「ボタンがクリックされました」と出力されます。その後、イベントは子要素までバブルアップし続け、子要素の click イベントをトリガーし、「子要素がクリックされました」と出力します。最後に、バブリングは親要素まで続き、親要素のクリック イベントがトリガーされます。

イベントが 2 回バブリングしてトリガーされるのを防ぐにはどうすればよいですか?

ボタンのクリック イベント ハンドラーで event.stopPropagation() を呼び出すことで、イベントがバブルし続けるのを防ぐことができます。上記のコードでは、ボタンのクリック イベントでこのメソッドを使用しています。ボタンをもう一度クリックすると、コンソールは「ボタンがクリックされました」とだけ出力し、子要素と親要素は継続的に表示されません。

要約すると、イベント バブリングは通常、ネストされた要素で 2 回トリガーされます。要素がイベントをトリガーすると、イベントはトリガー元の要素から親要素にバブルアップします。最上位にバブルアップするまでドキュメントオブジェクト。ただし、event.stopPropagation() を呼び出すことで、イベントがバブルし続けるのを防ぐことができ、それによってイベントが 2 回トリガーされるのを防ぐことができます。

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