Warum funktioniert „removeEventListener()' in meinem JavaScript-Code nicht?

Problem beim Entfernen von EventListener in JavaScript: Warum RemoveEventListener() fehlschlägt

In JavaScript ermöglichen Ereignis-Listener Entwicklern die Überwachung von DOM-Elementereignissen wie Klicks, Mausbewegungen und vielem mehr mehr. Während das Anhängen eines Ereignis-Listeners ziemlich einfach ist, kann das Entfernen manchmal eine Herausforderung darstellen.

Der Code

Der Originalcode fügt beim Klicken einen Ereignis-Listener zu einem Element namens „area“ hinzu.

<code class="javascript">area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);</code>

Das Problem

Das Problem tritt auf, wenn versucht wird, den Ereignis-Listener später im Code zu entfernen.

<code class="javascript">area.removeEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);</code>

Der Ereignis-Listener bleibt jedoch angehängt, sodass er nicht entfernt werden kann.

Die Lösung

Der Grund für dieses Problem liegt in der Art und Weise, wie Ereignis-Listener angehängt werden. Jede unterschiedliche Funktionsinstanz erstellt einen separaten Ereignis-Listener. In diesem Fall werden zwei anonyme Funktionen zum Hinzufügen und Entfernen des Listeners verwendet.

Um das Problem zu beheben, stellen Sie sicher, dass die zum Entfernen verwendete Funktionsreferenz mit der zum Hinzufügen des Listeners verwendeten identisch ist.

<code class="javascript">function handleClickListener(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}

// Add event listener
area.addEventListener('click', handleClickListener, true);

// Remove event listener
area.removeEventListener('click', handleClickListener, true);</code>

Durch die Verwendung derselben Funktionsreferenz für beide Vorgänge kann JavaScript den Ereignis-Listener beim Aufruf korrekt entfernen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „removeEventListener()' in meinem JavaScript-Code nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!