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:

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

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

let 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:

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

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

Dados um link e um botão. Ao clicar no botão, adicione ao final do texto do link o conteúdo do seu atributo href entre parênteses. Faça com que esta adição ocorra apenas no primeiro clique.

Dado um botão, cujo valor é o número 1. Faça com que a cada clique neste botão seu valor seja incrementado em uma unidade. Após o valor do botão atingir 10 - remova o event listener para que o botão não reaja mais aos cliques.