JavaScript で Arrow 関数を使った時の this の代わり

これまでイベント関数でバインドした要素を取得する場合。

$(".button").on("click", function(e) {
  $(this).addClass("clicked")
})

こんなコードを書いてました。

Arrow 関数の場合

e.targetだとクリックした要素を取得するので.buttonの子要素の場合があります。

$(".button").on("click", e => {
  $(e.target).addClass("clicked")
})

e.currentTargetだとバインドした要素を取得します。

$(".button").on("click", e => {
  $(e.currentTarget).addClass("clicked")
})