IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

jQuery でアロー関数を使ってみる

はじめに

ここでは、以下の記事を参考に jQuery でアロー関数を使ってみることにする。

 

使ってみる

jQuery でアロー関数を使う場合は、this ではなく、ev.currentTarget としてイベント対象となった要素を取得するとのこと。

f:id:matt-note:20190207193712p:plain

f:id:matt-note:20190207193724p:plain

-> ev.currentTarget を使ったところ、イベントが起きた要素に対して css メソッドを実行することができた。

 

なお、event.currentTarget はイベントハンドラがアタッチされた要素を参照するために使い、event.target はイベントが発生した要素を特定するために使うとのこと。

f:id:matt-note:20190207203400p:plain

 

アロー関数内で、this に対して css メソッドを呼び出してみる。また this と ev.currentTarget の値を比較してみる。

f:id:matt-note:20190207195723p:plain

f:id:matt-note:20190207195751p:plain

->  css メソッドで、<p>要素を赤くできていない。this を出力してみると、Object [ Window ] となった。一方、ev.currentTarget を出力してみると、<p>要素となっている。ここで this === window を実行してみると true になった。つまり、以下のようになっている。

f:id:matt-note:20190207195908p:plain

f:id:matt-note:20190208190011p:plain

 

function を使った関数内で、this と ev.currentTarget の値を比較してみる。

f:id:matt-note:20190207201027p:plain

f:id:matt-note:20190207201037p:plain

-> this の値は Object [ p ] になり、ev.currentTarget の値は <p>要素になった。this === currentTarget を実行してみると true になった。アロー関数を使わない場合は、this と currentTarget は同じ値になる。

 

まとめ

jQuery でアロー関数を使う場合は、ev.currentTarget のようにしてイベントの起きた要素を取得できる。アロー関数を使わない場合も ev.currentTarget でイベントの起きた要素を取得できる。

イベントの起きた要素を取得して操作したいという時は、ev.currentTarget とすると、問題が起きにくくなる。ev.currentTarget は、アロー関数内でも functionを使った関数内でも正常に動作するため。

アロー関数は、バインディングを作成しないため、this が window オブジェクトになる。