Como remover um ouvinte de evento?

Para remover um manipulador de eventos, utiliza-se o método removeEventListener(). Este método aceita os mesmos três argumentos que addEventListener():

1. Tipo de evento (string, por exemplo 'click', 'mouseover').
2. Referência para a função manipuladora que foi atribuída.
3. Objeto opcional ou valor booleano indicando a fase (captura ou bubbling). Deve coincidir com o usado na adição.

Importante: para remover com sucesso, é necessário passar a mesma referência de função que foi usada na adição. Funções anónimas criadas "em tempo real" não podem ser removidas desta forma.

Exemplo:

// Obter o elemento
const element = document.getElementById('myButton');

// Definir a função manipuladora
function handleClick() {
  console.log('Botão pressionado!');
}

// Adicionar manipulador
element.addEventListener('click', handleClick);

// ...algum código...

// Remover manipulador
element.removeEventListener('click', handleClick);

Se o manipulador foi adicionado com opções, por exemplo useCapture: true, também deve ser especificado na remoção:

element.addEventListener('click', handleClick, { capture: true });

// ...

element.removeEventListener('click', handleClick, { capture: true });

Se ao adicionar o terceiro argumento foi omitido (valor padrão false), também pode ser omitido na remoção ou usar false:

element.addEventListener('click', handleClick); // useCapture: false por padrão

// ...

element.removeEventListener('click', handleClick);
element.removeEventListener('click', handleClick, false); // equivalente ao acima