如何使用'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中文网其他相关文章！