ホームページ > 記事 > ウェブフロントエンド > 同じイベントでバブリングが 2 回発生するのはなぜですか?
同じイベントでバブリングが 2 回発生するのはなぜですか?
- WBOYオリジナル
- 2024-02-19 22:34:07721ブラウズ
同じバブルイベントが 2 回発生するのはなぜですか?
イベント バブリングは、ブラウザーの一般的なイベント配信メカニズムです。要素がイベントをトリガーすると、イベントは、ドキュメントのルート要素に渡されるまで、トリガーされた要素から上位の要素に順番に渡されます。このプロセスは水中で泡が泡立つようなものであるため、イベントバブリングと呼ばれます。
しかし、同じバブル イベントが 2 回発生することがあります。これはなぜでしょうか?主な理由は 2 つあります: イベント登録とイベント処理です。
まず第一に、イベント登録とはイベントを要素にバインドすることを指すことを明確にする必要があります。一般的な Web 開発では、通常、addEventListener() メソッドを使用して要素にイベント リスナーを追加します。このメソッドを使用して要素にイベント リスナーを追加すると、重複が発生することがあります。例:
var element = document.getElementById('myElement');
element.addEventListener('click', function() {
console.log('事件冒泡');
});上記のコードでは、クリック イベント リスナーを「myElement」という名前の要素に追加します。ただし、コード内で addEventListener() メソッドを複数回呼び出して、同じタイプのイベント リスナーを同じ要素に追加すると、各呼び出しで新しいリスナーが追加され、同じイベントが複数回発生します。
2 番目に、イベント処理とは、イベントがトリガーされた後に実行されるコードを指します。イベント配信中に、イベントが子要素から親要素に渡されると、親要素の対応するイベント ハンドラーがトリガーされます。ただし、場合によっては、親要素のイベント ハンドラーで子要素に対して同じタイプのイベントを誤って再度トリガーしてしまい、同じイベントが 2 回バブルアップしてしまうことがあります。
次のコード例は、上記の 2 つの状況を示しています:
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡</title>
</head>
<body>
<div id="parentElement">
<div id="childElement">点击我</div>
</div>
<script>
var parentElement = document.getElementById('parentElement');
var childElement = document.getElementById('childElement');
parentElement.addEventListener('click', function() {
console.log('父元素的事件处理程序');
childElement.click(); // 在父元素的事件处理程序中再次触发子元素的click事件
});
childElement.addEventListener('click', function() {
console.log('子元素的事件处理程序');
});
</script>
</body>
</html>上記のコードでは、クリック イベント リスナーを親要素と子要素にそれぞれ追加しました。イベントがトリガーされると、「親要素のイベント ハンドラー」が出力され、子要素のクリック イベントがトリガーされ、子要素のクリック イベントが再度トリガーされ、「子要素のイベント ハンドラー」がトリガーされます。 」と印刷されます。このようにして、同じイベントが 2 回発生します。
イベントのバブリングが二度発生することを避けるために、親要素のイベントハンドラーに判定条件を追加し、条件が満たされた場合にのみ子要素の対応するイベントをトリガーすることで、バブリングの繰り返しを避けることができます。泡立っています。
まとめると、同じイベントが 2 回発生する原因は、主にイベント登録とイベント処理の繰り返しによるものです。イベント登録の最適化や条件判定の追加などによりバブリングの繰り返しを回避できます。
以上が同じイベントでバブリングが 2 回発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。