Wie kann ich den Wert von „this' innerhalb eines Event-Handlers mithilfe von „addEventListener' steuern?

Der Wert von „this“ innerhalb des Handlers mit addEventListener

Bei Verwendung der addEventListener-Methode zur Verarbeitung von Ereignissen kann der Wert von „this“ innerhalb der Handler-Funktion sein eine Quelle der Verwirrung. Standardmäßig bezieht sich „this“ auf das Element, das das Ereignis ausgelöst hat. Es gibt jedoch Techniken, um dieses Verhalten zu ändern und sicherzustellen, dass „this“ auf das gewünschte Objekt verweist.

In Ihrem speziellen Beispiel mit dem TicketTable-Objekt tritt das Problem innerhalb der handleCellClick-Funktion auf. Beim Aufruf als Ereignishandler verweist „this“ auf das Element, das das Klickereignis empfangen hat, nicht auf das TicketTable-Objekt.

Um dieses Problem zu lösen, können Sie die Bindungsmethode verwenden, mit der Sie den Wert angeben können von „this“ für eine bestimmte Funktion. Durch die Bindung von „this“ an das TicketTable-Objekt können Sie sicherstellen, dass „this“ auf das richtige Objekt innerhalb der handleCellClick-Funktion verweist. Hier ist eine aktualisierte Version Ihres Codes, die dies demonstriert:

<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>

Indem Sie „this“ an das TicketTable-Objekt binden, können Sie wie vorgesehen auf seine Eigenschaften und Methoden innerhalb der handleCellClick-Funktion zugreifen.

Alternativ können Sie die handleEvent-Funktion verwenden, um alle Ereignisse abzufangen und den Wert von „this“ explizit zu definieren:

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

In diesem Fall bezieht sich „this“ bei der Verarbeitung von Ereignissen immer auf das TicketTable-Objekt. unabhängig vom Element, das das Ereignis ausgelöst hat.

Das obige ist der detaillierte Inhalt vonWie kann ich den Wert von „this' innerhalb eines Event-Handlers mithilfe von „addEventListener' steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!