arrow関数のthisに気を付ける(自分用メモ)

thisを容易く使うと

$("#aBtn").on('click', function() {
  console.log(this);
})
// ->
// <button id="aBtn">Submit</button>

$("#aBtn").on('click', () => {
  console.log(this);
})
// ->
// Window {window: Window, self: Window, document: document, name: "", location: Location, …}

上
実行された要素をthisとして定義
下(arrow)
宣言時のスコープを持つオブジェクトをthisとして定義
スコープを特に指定しなければグローバルオブジェクトとなる

実行された要素を取得するには

$("#aBtn").on('click', (e) => {
  console.log(e.currentTarget);
})
// ->
// <button id="aBtn">Submit</button>

が正解

余談だが、
仮に

<div id="aBtn">
  <p>Submit</p>
</div>

のような要素があったとしたとき

$("#aBtn").on('click', (e) => {
  console.log(e.target);
})

とすると
<p>Submit</p>
が返ってくることがある

これは
currentTargetがイベントリスナーを付けたノードに紐づけられたものに対して、
targetはマウスオーバーしているイベント発生ノードに紐づけられるから