Remoção de event listeners em JavaScript

Nesta lição, aprenderemos a remover event listeners que foram anteriormente adicionados por nós aos elementos. Vamos tomar como exemplo o seguinte botão:

html<input id="button" type="submit">

Vamos adicionar a este botão a função func:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
}

Agora, vamos fazer com que o event listener seja executado no primeiro clique e depois seja removido do botão. Para isso, existe um método especial removeEventListener. Este método recebe como primeiro parâmetro o tipo de evento e como segundo - a referência à função que precisa ser removida.

Geralmente, isso significa que o event listener é removido da mesma forma que foi adicionado. Ou seja, se nós o adicionamos assim: addEventListener('click', func), então nós o removemos com os mesmos parâmetros, assim: removeEventListener('click', func).

Então, vamos resolver a tarefa que definimos:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
  this.removeEventListener('click', func);
}