JavaScript イベントバブリングとイベントキャプチャの違い

JS イベントのバブリングとキャプチャの違いは何ですか。具体的なコード例が必要です。

イベント バブリングとイベント キャプチャは、JavaScript のイベント処理の 2 つの段階です。これらを理解する前に、DOM イベントとは何なのかを理解する必要があります。

HTML では、ボタンのクリックやウィンドウのスクロールなど、ユーザーがページ上の要素を操作するとき、これらの動作はイベントと呼ばれます。 DOM (Document Object Model) イベントは、イベントの発生時に実行される JavaScript コードを指します。

JavaScript では、addEventListener を介して、または要素のプロパティにメソッドを直接割り当てることによって、イベント ハンドラーを要素にバインドできます。どのメソッドが使用されるかに関係なく、イベントは特定の順序で要素との間で伝播されます。

次に、イベント バブリングとイベント キャプチャについて詳しく見ていき、具体的なコード例を示します。

イベント バブリング:
イベント バブリングとは、イベントが最も内側の要素から伝播し始め、徐々に外側に向かって最も外側の要素に伝播することを意味します。つまり、イベントはまず現在の要素でトリガーされ、次に親要素、さらに最も外側の要素に伝播されます。

たとえば、次の HTML 構造を持つ親要素 div と、その子要素 ​​span:

<div id="parent">
  <span id="child">Hello World!</span>
</div>

次のように、子要素 span にクリック イベントを追加するとします。 # #

var child = document.getElementById('child');
child.addEventListener('click', function() {
  console.log('child element clicked!');
});

子要素のスパンをクリックすると、イベントは次の順序で伝播されます:

子要素のスパンのクリック イベントがトリガーされ、「子要素がクリックされました!」が出力されます。
1. イベントは親要素 div に伝播され、親要素は対応するイベント ハンドラー (存在する場合) も実行します。
2. 上位要素がある場合、イベントは最も外側の要素に渡されます。

イベント キャプチャ:

イベント キャプチャとは、イベントが最も外側の要素から伝播を開始し、最も内側の要素まで段階的に内側に伝播することを意味します。つまり、イベントは最初に最も外側の要素でトリガーされ、次に最も内側の要素まで子要素に伝播します。

JS でイベント キャプチャを実装するには、イベント リスナーを追加するときに useCapture というオプションのパラメーターを渡す必要があります。デフォルトでは、useCapture の値は false です。つまり、イベントはバブリング方式で伝播されます。 useCapture を true に設定すると、イベントはキャプチャされた方法で伝播されます。

たとえば、次の HTML 構造を持つ親要素 div とその子要素のスパンがあります:

<div id="parent">
  <span id="child">Hello World!</span>
</div>

次のように親要素 div にクリック イベントを追加するとします。 # #

var parent = document.getElementById('parent');
parent.addEventListener('click', function() {
  console.log('parent element clicked!');
}, true);

子要素のスパンをクリックすると、イベントは次の順序で伝播されます:

最も外側の要素 div のクリック イベントがトリガーされ、「親要素がクリックされました」 !」が出力されます。

1. イベントは子要素のスパンの内側に伝播され、子要素は対応するイベント ハンドラー (存在する場合) も実行します。
2. イベント伝播の順序は逆にすることができますが、実際にはイベント バブリングが一般的に使用されることに注意してください。

要約すると、イベント バブリングとイベント キャプチャは、JavaScript におけるイベント処理の 2 つの段階です。それらの違いと使用法を理解することは、イベントの配信と処理をより適切に制御するのに役立ちます。実際の開発では、必要に応じてイベント バブリングまたはイベント キャプチャの使用を選択したり、両方を同時に使用して複雑なイベント ロジックを処理したりできます。

以上がJavaScript イベントバブリングとイベントキャプチャの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。