如何使用「addEventListener」控制事件處理程序中「this」的值？

Handler 中 this 的值使用 addEventListener

使用 addEventListener 方法處理事件時，handler 函數中 this 的值可以是混亂的根源。預設情況下，「this」指引發事件的元素。但是，有一些技術可以修改此行為並確保“this”引用所需的物件。

在帶有ticketTable物件的特定範例中，問題出現在handleCellClick函數中。當作為事件處理程序呼叫時，「this」指向接收點擊事件的元素，而不是ticketTable物件。

要解決這個問題，您可以使用bind方法，它允許您指定值「this」用於特定功能。透過將「this」綁定到ticketTable對象，您可以確保「this」在handleCellClick函數中引用正確的物件。以下是程式碼的更新版本，示範了這一點：

<code class="js">ticketTable.prototype.render = function(element) {
  // ...

  // Bind "this" to ticketTable object for handleCellClick function
  cell1.addEventListener("click", this.handleCellClick.bind(this), false);

  // ...
}

ticketTable.prototype.handleCellClick = function() {
  // Now, "this" references the ticketTable object within the handler
  alert(this.tickets.length);
}</code>

透過將「this」綁定到ticketTable對象，您可以按預期在handleCellClick函數中存取其屬性和方法。

或者，您可以使用handleEvent函數捕獲任何事件並明確定義“this”的值：

<code class="js">ticketTable.prototype.handleEvent = function(event) {
  switch (event.type) {
    case "click":
      // "this" references the ticketTable object
      alert(this.tickets.length);
      break;
    // ...
  }
}</code>

在這種情況下，“this”在處理事件時將始終引用ticketTable對象，無論引發事件的元素為何。

以上是如何使用「addEventListener」控制事件處理程序中「this」的值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！