Wie verhält sich das Schlüsselwort „this' im „addEventListener' von JavaScript und wie können wir den richtigen Kontext sicherstellen?

Der Wert davon innerhalb des Handlers mit addEventListener

In JavaScript bezieht sich dies auf das Objekt, für das die Methode aufgerufen wird. Bei der Verarbeitung von Ereignissen mit addEventListener kann sich dies jedoch auf das Element beziehen, das das Ereignis ausgelöst hat, und nicht auf das Objekt, das die Ereignishandlerfunktion enthält.

Betrachten Sie das folgende Beispiel:

<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>Im handleCellClick-Funktion, diese bezieht sich auf die angeklickte Zelle, nicht auf das TicketTable-Objekt. Dieses Problem kann mit der Bind-Methode gelöst werden.</p>
<p>Bind ermöglicht es Ihnen, den Wert davon für eine Funktion anzugeben. In diesem Fall können Sie den this-Wert an das TicketTable-Objekt binden:</p>
<pre class="brush:php;toolbar:false"><code class="javascript">cell1.addEventListener("click", this.handleCellClick.bind(this), false);</code>

Die gebundene Funktion hat den richtigen this-Kontext, wenn das Ereignis ausgelöst wird:

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

Alternativ: Sie können die Methode handleEvent verwenden, die speziell für die Verarbeitung von Ereignissen entwickelt wurde. In diesem Fall bezieht sich dies immer auf das Objekt, das die Methode implementiert:

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

Sowohl bind als auch handleEvent bieten Lösungen für das Problem dieser Referenz in Ereignishandlern und ermöglichen Ihnen den Zugriff auf den richtigen Objektkontext in Ihrem Event-Handler-Funktionen.

Das obige ist der detaillierte Inhalt vonWie verhält sich das Schlüsselwort „this' im „addEventListener' von JavaScript und wie können wir den richtigen Kontext sicherstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!