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 < this.tickets.length; i++) {
    var row = document.createElement("tr");
    var cell1 = document.createElement("td");
    var cell2 = document.createElement("td");
    cell1.appendChild(document.createTextNode(i));
    cell2.appendChild(document.createTextNode(this.tickets[i]));
    cell1.addEventListener("click", this.handleCellClick, false);
    row.appendChild(cell1);
    row.appendChild(cell2);
    tbl.appendChild(row);
  }
  element.appendChild(tbl);
};

ticketTable.prototype.handleCellClick = function () {
  // PROBLEM! In the context of this function, "this" is the element that triggered the event.
  alert(this.innerHTML); // Works fine
  alert(this.tickets.length); // Does not work
};</code>

在handleCellClick 函数，这是指单击的单元格，而不是 TicketTable 对象。这个问题可以使用bind方法来解决。

bind允许你为函数指定this的值。在这种情况下，您可以将 this 值绑定到 TicketTable 对象：

<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中文网其他相关文章！