javascript - 異なる *Target プロパティの目的は何ですか?

Question

MouseEvent クラスには、複数の *Target イベントがあります。

• 目標
• 現在のターゲット
• 関連ターゲット

MouseEvent のコンテキストでの目的は何ですか?

Answer 1

これらのプロパティは、JavaScript のマウス イベントに相当します。JavaScript イベントは DOM をトラバースします (「バブリング」と呼ばれます)。targetイベントが最初にディスパッチされたオブジェクトです。currentTargetイベント ハンドラがアタッチされているオブジェクトです。

例

次の HTML 構造があります。

<ul id="list">
  <li>Entry 1</li>
  <li>Entry 2</li>
</ul>

要素にクリック ハンドラーを追加します<ul>(JavaScript または Dart のいずれかを使用して、概念は同じです)。

次に「エントリ 2」をクリックすると、クリック ハンドラが呼び出されます (イベントが「バブルアップ」するため)。要素にtargetなりますが、要素になります。どちらを使用する必要があるかは、ハンドラーで何をしたいかによって異なります。たとえば、 を使用して「エントリ 2」自体を非表示にしたり、 を使用してリスト全体を非表示にしたりできます。<li>currentTarget<ul>targetcurrentTarget

によって参照される要素relatedTargetは、MouseEvent のタイプによって異なります。リストはevent.relatedTargetにあります。上記の例ではnull、クリック イベントには関連するターゲットがないため、 になります。

関連する MDN リンク: event.currentTarget、 event.target