Problema de eliminación de EventListener en JavaScript: por qué falla removeEventListener()

En JavaScript, los detectores de eventos permiten a los desarrolladores monitorear eventos de elementos DOM, como clics, movimientos del mouse y mucho más. más. Si bien adjuntar un detector de eventos es bastante sencillo, eliminarlo a veces puede plantear desafíos.

El código

El código original agrega un detector de eventos a un elemento llamado área cuando se hace clic.

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

El problema

El problema surge al intentar eliminar el detector de eventos más adelante en el código.

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

Sin embargo, el detector de eventos permanece adjunto, lo que impide su eliminación.

La solución

El motivo de este problema radica en cómo se adjuntan los detectores de eventos. Cada instancia de función diferente crea un detector de eventos independiente. En este caso, se utilizan dos funciones anónimas para agregar y eliminar el oyente.

Para resolver el problema, asegúrese de que la referencia de función utilizada para la eliminación sea idéntica a la utilizada para agregar el oyente.

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

Al usar la misma referencia de función para ambas operaciones, JavaScript puede eliminar correctamente el detector de eventos cuando se llama.