Retira una escucha cuando ya no hace falta

La idea clave

Una función registrada como escucha puede dejar de ser necesaria. removeEventListener la elimina si le pasas el mismo nombre de función y el mismo tipo de evento.

Ejemplo paso a paso

Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.

const boton = document.querySelector('#accion');
function avisar() {
  document.querySelector('#saludo').textContent = 'Sigue activo';
}
boton.addEventListener('click', avisar);
document.querySelector('#desactivar').addEventListener('click', () => {
  boton.removeEventListener('click', avisar);
  document.querySelector('#saludo').textContent = 'Desactivado';
});

Editar y probar este mismo ejemplo ↓

1. avisar tiene nombre para poder reutilizar la misma referencia.
2. addEventListener la conecta al primer botón.
3. Al pulsar Desactivar, removeEventListener la desconecta; los clics posteriores no ejecutan avisar.

Practica con código

Antes de empezar, piensa: ¿Seguirá funcionando el primer botón después de pulsar Desactivar?

Cambia el mensaje de desactivación a «Desconectado». Pulsa Activar, luego Desactivar y de nuevo Activar: debe conservar ese estado.