JavaScript イベントにおける currentTarget とターゲット: 違いは何ですか?

JavaScript イベントにおける currentTarget とターゲット: 違いを解明する

JavaScript イベント処理の領域において、currentTarget と currentTarget の違いを理解するターゲットのプロパティが重要です。例を使用して、それらの違いを詳しく見てみましょう。

ターゲット プロパティの探索

ターゲット プロパティは、イベントを直接トリガーした要素を表します。次のシナリオを考えてみましょう:

const button = document.querySelector('button');

button.addEventListener('click', (e) => {
  console.log(e.target); // Logs the button element clicked
});

この例では、ボタンがクリックされると、e.target はクリック イベントを開始した要素であるボタン自体を参照します。

currentTarget プロパティの紹介

ターゲットはイベントのイニシエーターを指しますが、 currentTarget は、イベント ハンドラーがアタッチされる要素を表します。前のコードを変更してみましょう:

const wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click', (e) => {
  console.log(e.currentTarget); // Logs the wrapper div
});

この場合、クリック イベントがその中のボタンから発生したとしても、e.currentTarget はラッパー div を参照します。これは、イベント リスナーがラッパーにアタッチされ、制御要素になるためです。

適切なプロパティの選択: シナリオベースのガイド

• 次の場合にターゲットを使用します。 必要な要素に関する情報にアクセスする必要があります。イベントが発生しました。
• 次の場合に currentTarget を使用します。 イベントが要素の階層内のどこで発生したかに関係なく、イベント ハンドラーが関連付けられている要素を操作したい場合。

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