Desvinculación de eventos en JavaScript

En esta lección aprenderemos a desvincular manejadores de eventos que previamente habíamos vinculado a elementos. Supongamos como ejemplo que tenemos el siguiente botón:

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

Vinculemos a este botón la función func:

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

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

Ahora hagamos que el manejador del evento se active en el primer clic, y luego se desvincule del botón. Para esto existe un método especial removeEventListener. Este método acepta como primer parámetro el tipo de evento, y como segundo - una referencia a la función que necesita ser desvinculada.

Generalmente, esto significa que el manejador del evento se desvincula de la misma manera que se vinculó. Es decir, si lo vinculamos así: addEventListener('click', func), entonces lo desvincularemos con los mismos parámetros, así: removeEventListener('click', func).

Entonces, resolvamos la tarea que nos hemos propuesto:

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

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

Se da un enlace y un botón. Al hacer clic en el botón, agregue al final del texto del enlace el contenido de su atributo href entre paréntesis. Haga que esta adición ocurra solo en el primer clic.

Se da un botón, cuyo valor es el número 1. Haga que al hacer clic en este botón su valor aumente en uno cada vez. Después de que el valor del botón alcance 10 - desvincule el manejador del evento para que el botón ya no reaccione al clic.