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 einen Ereignis-Listener zu einem Element mit dem Namen „area“ hinzu, wenn darauf geklickt wird.

area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);

Das Problem

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

area.removeEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);

Der Ereignis-Listener bleibt jedoch angehängt und verhindert so seine Entfernung.

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.

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

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