JavaScript イベントバブリングとイベントキャプチャの違い-jsチュートリアル-php.cn

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

PHPz

リリース： 2024-02-18 16:32:08

オリジナル

519 人が閲覧しました

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!');
});

ログイン後にコピー

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

イベントキャプチャ:

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

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 のクリックイベントがトリガーされ、「親要素がクリックされました」 !」が出力されます。

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

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

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