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

Question

は、MouseEventクラスでは、複数の*対象のイベントがあります

• target
• currentTarget
• relatedTarget

たMouseEventの文脈で、その目的は何ですか？

Answer 1

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

例

あなたは、このHTMLの構造を有する：

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

を、あなたは（どちらかJavaScriptやダーツを経由して、コンセプトは同じである）<ul>要素にクリックハンドラを追加します。

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

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

関連MDNリンク： event.currentTarget、 event.target