Problema de remoção de EventListener em JavaScript: por que removeEventListener() falha

Em JavaScript, os ouvintes de eventos permitem que os desenvolvedores monitorem eventos de elementos DOM, como cliques, movimentos do mouse e muito mais mais. Embora anexar um ouvinte de evento seja bastante simples, removê-lo às vezes pode representar desafios.

O código

O código original adiciona um ouvinte de evento a um elemento chamado area quando clicado.

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

O problema

O problema surge ao tentar remover o ouvinte de evento posteriormente no código.

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

No entanto, o ouvinte de eventos permanece anexado, impedindo sua remoção.

A solução

O motivo desse problema está na forma como os ouvintes de eventos são anexados. Cada instância de função diferente cria um ouvinte de evento separado. Nesse caso, duas funções anônimas são usadas para adicionar e remover o ouvinte.

Para resolver o problema, certifique-se de que a referência da função usada para remoção seja idêntica àquela usada para adicionar o ouvinte.

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

Ao usar a mesma referência de função para ambas as operações, o JavaScript pode remover corretamente o ouvinte de evento quando chamado.