JavaScript イベント処理: `currentTarget` と `target` の違いは何ですか?

JavaScript: イベント処理における CurrentTarget プロパティと Target プロパティの違いを明らかにする

JavaScript イベント処理の領域では、currentTarget プロパティと target プロパティイベントの伝播を理解する上で明確な役割を果たしますメカニズム。

定義:

• ターゲット: イベントを開始した直接の要素を表します。これは通常、クリックやホバーなど、トリガーとなるアクションが発生した要素です。
• currentTarget: イベント リスナーがアタッチされている要素を指します。これは、イベント バブル パス内の現在の要素を示します。

イベントのバブリングとキャプチャ:
イベントは、JavaScript のデフォルトのバブリング動作に従います。これは、内部要素でトリガーされたイベントが DOM ツリーをその祖先まで伝播 (バブル) することを意味します。

プロパティの役割:
イベントの伝播中、currentTarget と target の両方が貴重な情報を提供します:

• ターゲット:伝播フェーズに関係なく、最初にイベントを引き起こした要素を識別します。
• currentTarget: イベントが DOM 階層をバブルアップすると動的に更新されます。これは、イベント リスナーが現在処理されている要素を指します。

シナリオと使用例:

• Event伝播制御:

  • 親要素のイベント (イベント キャプチャ) を実行すると、currentTarget は常に親を参照しますが、ターゲットはイベントをトリガーした子要素を示します。
  • イベントをドキュメント オブジェクトにバブリングすることによって (イベント バブリング) 、 currentTarget と target は両方とも、全体を通して同じ要素と整列します。 propagation.

• 要素の分離:

  • currentTarget を使用すると、リスナーをアタッチすることでイベント処理を特定の要素に分離できます。それらの親要素。イベントを開始した要素は、ターゲット プロパティを通じて引き続き識別できます。

例:

const parent = document.querySelector(".parent");
parent.addEventListener("click", (event) => {
  console.log("currentTarget:", event.currentTarget); // Parent element
  console.log("target:", event.target); // Clicked child element
});

以上がJavaScript イベント処理: `currentTarget` と `target` の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。