JavaScriptアロー関数でthisが動かない

WEB開発

2019.10.13

この記事は約1分で読めます。

jqueryでよくやるこういった記述

$('.class').on('click',function(){
console.log(this);
});

これを最近っぽくアロー関数で書くとうまくthisでクリックしたデータが取れない

$('.class').on('click',() => {
console.log(this);
});

これは似ているようで実際は仕様が違うからである。
後者のthisはクリックしたもののデータではなく、全てのこの機能が付与されたものに対してのデータが取得されるらしい。
この場合は以下のようにする。

$('.class').on('click',(e) => {
const el = e.currentTarget;
console.log(el);
});