Wie gehen Sie mit „diesen“ Referenzen in Ereignis-Listenern um, wenn Sie mit dynamischen Elementen arbeiten?

Umgang mit „this“-Referenzen innerhalb von Ereignis-Listenern

Bei der objektorientierten Programmierung bezieht sich das Schlüsselwort „this“ auf das Objekt, auf dem a Methode wird aufgerufen. Wenn jedoch addEventListener zum Behandeln von Ereignissen auf dynamisch gerenderten Elementen verwendet wird, kann die „this“-Referenz problematisch werden.

Das Problem

Wie im bereitgestellten Code angegeben, wann Wenn ein Ereignis-Listener mit addEventListener an eine Zelle angehängt wird, bezieht sich die „this“-Referenz innerhalb der Handler-Funktion auf das angeklickte Element und nicht auf die Objektinstanz, die die Tabelle erstellt hat. Dies macht es schwierig, vom Event-Handler aus auf Objekteigenschaften und -methoden zuzugreifen.

Die Lösung: Bind oder handleEvent

Eine Lösung für dieses Problem ist die Verwendung von bind, Damit können Sie den Wert angeben, der als „this“ für alle Aufrufe einer bestimmten Funktion verwendet werden soll. Indem Sie die Event-Handler-Funktion an die Objektinstanz binden, stellen Sie sicher, dass die „this“-Referenz innerhalb der Handler-Funktion konsistent bleibt.

Beispiel für die Verwendung von bind:

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

Ein alternativer Ansatz ist Implementieren Sie die Funktion handleEvent, die alle Ereignisse innerhalb eines Objekts abfangen und verarbeiten soll. Durch Überschreiben der handleEvent-Methode können Sie das Verhalten für alle Ereignistypen für ein Objekt festlegen.

Beispiel für die Verwendung von handleEvent:

<code class="javascript">ticketTable.prototype.handleEvent = function(event) {
  if (event.type === "click") {
    console.log(this.tickets.length); // Accesses the array property
  }
};

cell1.addEventListener("click", this, false);</code>

Ereignis-Listener entfernen

Es ist wichtig zu beachten, dass es bei der Verwendung von bind schwierig sein kann, den Ereignis-Listener ordnungsgemäß zu entfernen. Erwägen Sie stattdessen die Verwendung der handleEvent-Methode oder einer Drittanbieterbibliothek, die die Bereinigung von Ereignis-Listenern unterstützt.

Zusammenfassend lässt sich sagen, dass Sie durch die Verwendung von bind oder die Implementierung von handleEvent die „this“-Referenz innerhalb von Ereignishandlern steuern und so ordnungsgemäß arbeiten können Zugriff auf Objekteigenschaften und -methoden. Die ordnungsgemäße Bereinigung des Ereignis-Listeners ist ebenfalls von entscheidender Bedeutung, um die Speichereffizienz aufrechtzuerhalten.

Das obige ist der detaillierte Inhalt vonWie gehen Sie mit „diesen“ Referenzen in Ereignis-Listenern um, wenn Sie mit dynamischen Elementen arbeiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!