jQueryを使ったイベント処理におけるアロー関数の罠
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')
})