clickイベントのthisはアロー関数だと使えないって最近知った→e.targetで代用可能と教えてもらった

クリックされた要素のthisを取りたいならfunction (e){ }を使う

こないだ嵌まったネタです。

クリックしたボタンの値を使って処理の内容を変えようとしたのですが、addEventListner に渡す無名関数内でthisが取れませんでした。

検索したら、アロー関数だとthisが取れないことが判明。試してみたらホンマや！ということでCodePenでまとめて備忘録にしてみました。

クリックされたボタンのthis.valueを表示します。function(){ }だとちゃんとthis.valueが取れますが、アロー関数だとthis.valueがundefinedになってしまいます。

なんかthisを取る方法とかあるのかな。まぁ、addEventListnerの時は常にfunction (e){ } を使うってことでいいのかも

See the Pen
function() or ()=> by Ryoji Kimura (@ryjkmr)
on CodePen.

【追記】

コメントで「e.target」を使えばthisと同じ値が取れると教えていただきました。確かに取れました。私はどうやら「this」という言葉に妙にとらわれていたようですね。勉強になります。

これもCodePenでテストしたヤツを貼っておきます。

See the Pen
by Ryoji Kimura (@ryjkmr)
on CodePen.