アロー関数を使用した時、イベントリスナーを使用しなければ動作しない理由

Question

初心者です。
通常の関数を、アロー関数へ書き換える練習をしていました。

こちら↓を書き換えるとして

$('#btn').on('click', function(){
    $(this).css('color', '#f00')
})

最初は、↓の様に書き換えました。

$('#btn').on('click', () =>{
    $(this).css('color', '#f00')
})

しかしこれでは動作はせず、
イベントリスナー使わなければならないという事がわかりました。

$('#btn').on('click',(e) => {
  $(e.target).css('color','#f00')
});

という風にすると機能しました。

なぜ、アロー関数に書き換えたとたんに、
イベントリスナーを使う必要が出てくるのでしょうか？？

Answer 1

関数がイベントハンドラとして使用された場合、その this はリスナーが配置されている要素に設定されます

DOM イベントハンドラーとして | this - JavaScript | MDN

　

アロー関数自身は this を持ちません。レキシカルスコープの this 値を使います。つまり、アロー関数内の this 値は通常の変数検索ルールに従います。このためスコープに this 値がない場合、その一つ外側のスコープで this 値を探します。

this を束縛しない | アロー関数 - JavaScript | MDN

ということなので、「関数式とはthisに入っているものが違う」というのが、その理由です。

Answer 2

イベントリスナー使わなければならないという事がわかりました。

渡した関数そのものがイベントリスナーです。疑問が成立していません。

Answer 3

アロー関数のthisはwindowのことですし
function内のthisとe.targetは違うものです

追記

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('.nest').on('click',function(e){
    $('#view1').text($(this).attr('id'));
    $('#view2').text($(e.target).attr('id'));
  });
});
</script>
<div id="nest1" class="nest">1
<div id="nest2">2
<div id="nest3">3
</div>
</div>
</div>
<div id="nest4" class="nest">4
<div id="nest5">5
<div id="nest6">6
</div>
</div>
</div>


<div id="view1"></div>
<div id="view2"></div>

Comments

[yambejp]

<div id="btn">
1
<div id="dummy">2</div>
3
</div>

で2をクリックした場合、funcitionのthisは#btnを掴みますが
e.targetでは#dummyを掴みます

[AmanoEriko]

ご回答ありがとうございます。

functionのthisは
親要素を掴む

e.targetはクリックした要素自体を掴む

という事でしょうか？？

[yambejp]

thisは自分自身で、e.targetは自分に含まれる内側の最初につかめるdomが得られるようです

[AmanoEriko]

ありがとうございます。
大分、頭の中を整理することができました！