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:

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

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

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

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

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