Remover ouvinte de eventos em JavaScript

Este tutorial ensina como remover um ouvinte de eventos em JavaScript.

Use o método removeEventListener() para remover o listener de eventos em JavaScript

Se criarmos um elemento e não quisermos que ele execute o comportamento pretendido quando o usuário interagir com ele, temos que remover o ouvinte de evento desse elemento. Conseguimos isso usando a função integrada do JavaScript removeEventListener(). Esta função remove o ouvinte de evento anexado de um elemento e interrompe sua ação predefinida. Podemos desabilitar um clique em um botão removendo o ouvinte de evento anexado a ele.

A função aceita os seguintes parâmetros:

1. type: é uma string que especifica o tipo de ação do usuário para a qual queremos remover o ouvinte de evento.
2. listener: a função de ouvinte de evento que queremos remover do referido elemento.
3. options: é um parâmetro opcional que ajuda a especificar as características do ouvinte de eventos. As seguintes opções podem ser definidas:
   • capture: é uma variável booleana informando que o evento irá para o ouvinte registrado antes de mover para qualquer evento de destino na árvore DOM.
   • mozSystemGroup: uma variável booleana que indica que o ouvinte de evento será adicionado ao grupo do sistema. Ele está disponível apenas para código em execução no cromo do XBL / Firefox.
4. useCapture: é uma variável booleana que informa se o ouvinte de evento é um ouvinte de captura. Também é um parâmetro opcional.

var element_name = document.querySelector('#btn');
var count = 0;
var counter = function(event) {
  count++;
  // perform the intended function in case of occurence of event
  if (count == 2) {
    this.removeEventListener('click', myHandler);
  }
} element_name.addEventListener('click', counter);

No código acima, adicionamos um ouvinte de evento e especificamos a função a ser executada se o ouvinte for disparado. Se o usuário tentar acionar o mesmo ouvinte novamente, removemos o ouvinte de evento usando removeEventListener(). Conseguimos isso selecionando primeiro o elemento no qual queremos adicionar / remover o ouvinte de evento. Em seguida, inicializamos um contador para manter a contagem do número de cliques. Finalmente, declaramos o manipulador de eventos para disparar e também incrementar a contagem. No caso de o usuário clicar duas vezes, o removeEventListener() é acionado.