院卒新人サラリーマンのメモ代わり

備忘としてのメモを記載

thisとcurrentTarget

まずevent.targetとevent.currentTargetの違い
currentTargetはイベントリスナーを登録した要素(固定)
targetは実際にイベントが起きた要素(可変)

<body>
  <p></p>
  <div></div>
</body>
document.body.addEventListener('click', listener);
pがクリックされる target = p currentTarget = body
divがクリックされる target = div currentTarget = body

三章第五回 イベントオブジェクト — JavaScript初級者から中級者になろう — uhyohyo.net

ここで、thisの話題に移る。
イベントリスナーでthisを使うとその要素を取得できる。
ただ、アロー関数を使うとthisはレシーバを指すから動かなくなる。

で、上のcurrentTargetの話題に戻ると、currentTagetもイベントリスナーを登録した要素を指すから
event.currentTarget = this
JavaScript event.currentTarget vs this - Stack Overflow

だから自分の要素を指定したいときにはthisではなくcurrentTargetを使うと
アロー関数も使えるし、thisはレシーバを指すって考えで固定できるから良いと思った。