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

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

Susan Sarandon

Freigeben： 2024-10-29 10:31:30

Original

857 Leute haben es durchsucht

How Does the

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

Nach dem Login kopieren

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.

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:

<code class="javascript">cell1.addEventListener("click", this.handleCellClick.bind(this), false);</code>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!