Warum funktioniert mein JavaScript-RemoveEventListener() nicht?

Javascript RemoveEventListener funktioniert nicht

In diesem Code wird ein Ereignis-Listener zu einem Element mithilfe der Methode addEventListener() hinzugefügt:

area.addEventListener('click',function(event) ...,true);

Später wird in einer anderen Funktion versucht, den Ereignis-Listener mithilfe der Methode „removeEventListener()“ zu entfernen:

area.removeEventListener('click',function(event) ...,true);

Der Ereignis-Listener wird jedoch nicht entfernt. Warum passiert das?

Das Problem:
Das Problem liegt in der Tatsache, dass die beiden anonymen Funktionen, die als Argumente an die Methoden addEventListener() und removeEventListener() übergeben werden, zwei verschiedene Funktionen. Wenn der Ereignis-Listener mit dem folgenden Code hinzugefügt wird:

area.addEventListener('click',function(event) ...,true);

Die Laufzeit erstellt ein neues, eindeutiges anonymes Funktionsobjekt und weist es dem Click-Ereignishandler des Bereichselements zu.

Wann Der Event-Listener wird mit dem folgenden Code entfernt:

area.removeEventListener('click',function(event) ...,true);

Ein

anderes neues, eindeutiges anonymes Funktionsobjekt wird erstellt und dem Click-Event-Handler des Bereichselements zugewiesen. Die erste Funktion wird nicht entfernt, sodass sie weiterhin das Klickereignis verarbeitet.

Lösung:Um den Ereignis-Listener ordnungsgemäß zu entfernen, muss die Methode „removeEventListener()“ bereitgestellt werden mit einem Verweis auf dasselbe Funktionsobjekt, das an die Methode addEventListener() übergeben wurde. Dazu sollte der Ereignis-Listener als benannte Funktion definiert werden und dann sollte die benannte Funktion als Argument für die Methoden addEventListener() und removeEventListener() verwendet werden. Zum Beispiel:

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein JavaScript-RemoveEventListener() nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!