jQueryを使ったイベント処理におけるアロー関数の罠

mayatasomayataso

ES2015から使えるjsの構文、アロー関数だが、jQueryと組み合わせるとハマることがある。

  • アロー関数について
/* 従来の呼び出し方 */
$('#testId').on('click', function(){
    $(this).css('color', 'red')
})
/* アロー関数を用いた呼び出し方 */
$('#testId').on('click',() => {
    $(this).css('color', 'red')
})
  • 2つの違い

thisの示す先が異なる。

functionを使うとイベントの発生した要素(#testId)を指すが、アロー関数の場合、それを素通りして呼び出し元のオブジェクトを示す。

  • ラムダを使ってイベントの発生した要素を取得する

EventのcurrentTargetを使おう。

$('#testId').on('click', event =>{
   $(event.currentTarget).css('color', 'red')
})