JavaScript 的「addEventListener」中的「this」關鍵字如何表現以及我們如何確保正確的上下文？

使用 addEventListener 的處理程序中 this 的值

在 JavaScript 中，this 指的是呼叫該方法的物件。但是，當使用 addEventListener 處理事件時， this 可以引用引發事件的元素，而不是包含事件處理函數的物件。

考慮以下範例：

<code class="javascript">function ticketTable(tickets) {
  this.tickets = tickets;
}

ticketTable.prototype.render = function (element) {
  var tbl = document.createElement("table");
  for (var i = 0; i <p>在handleCellClick 函數，這是指點擊的儲存格，而不是 TicketTable 物件。這個問題可以用bind方法來解決。 </p>
<p>bind允許你為函數指定this的值。在這種情況下，您可以將this 值綁定到TicketTable 物件：</p>
<pre class="brush:php;toolbar:false"><code class="javascript">cell1.addEventListener("click", this.handleCellClick.bind(this), false);</code>

當事件引發時，綁定函數將具有正確的this 上下文：

<code class="javascript">ticketTable.prototype.handleCellClick = function () {
  alert(this.innerHTML); // Still works fine
  alert(this.tickets.length); // Now works as expected
};</code>

或者，您可以使用handleEvent方法，該方法是專門為處理事件而設計的。在這種情況下，this 將始終引用實作該方法的物件：

<code class="javascript">ticketTable.prototype.handleEvent = function (event) {
  console.log(this.name); // 'Something Good'
  switch (event.type) {
    case 'click':
      // Some code here...
      break;
    case 'dblclick':
      // Some code here...
      break;
  }
};</code>

bind 和 handleEvent 都提供了事件處理程序中 this 引用問題的解決方案，讓您存取正確的物件上下文。事件處理函數。

以上是JavaScript 的「addEventListener」中的「this」關鍵字如何表現以及我們如何確保正確的上下文？的詳細內容。更多資訊請關注PHP中文網其他相關文章！