如何在事件處理程序中正確使用 jQuery 的 $(this) 和 ES6 箭頭函數？

將jQuery $(this) 與ES6 箭頭函數（詞法this 綁定）結合使用

使用ES6 箭頭函數綁定事件處理程式可能會出現問題使用jQuery 的$(this) 選擇器。這是因為箭頭函數在詞法上綁定了 this 關鍵字，這可能不是 jQuery 回呼中所需的行為。

以下範例說明了該問題：

class Game {
  foo() {
    this._pads.on('click', () => {
      if (this.go) { $(this).addClass('active'); }
    });
  }
}

在上面的範例中，使用點擊事件處理程序的箭頭函數會導致$(this) 引用Game 實例而不是點擊的元素。這是因為箭頭函數沒有自己的 this 綁定，因此它們從周圍的作用域繼承它。

解決方案

要解決此問題，請避免使用箭頭函數綁定 jQuery 事件處理程序時。相反，使用傳統的函數宣告或使用bind 方法明確綁定this 關鍵字：

class Game {
  foo() {
    this._pads.on('click', function() {
      if (this.go) { $(this).addClass('active'); }
    }.bind(this));
  }
}

或者，您可以使用event.currentTarget 存取點擊的元素：

class Game {
  foo() {
    this._pads.on('click', (event) => {
      if (this.go) { $(event.currentTarget).addClass('active'); }
    });
  }
}

使用事件.currentTarget 提供對觸發事件的元素的訪問，無論回呼函數的綁定上下文如何。

以上是如何在事件處理程序中正確使用 jQuery 的 $(this) 和 ES6 箭頭函數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！