Cómo eliminar listeners en JavaScript con AbortController

Este es el segundo post de una mini-serie sobre los AbortController de JavaScript. Como ya dije en este post, me parece una de las características de JS que se debería conocer mucho más que actualmente.

Otra de las funcionalidades que permite implementar el AbortController es la de dejar de escuchar eventos. Me explico.

Normalmente, en JS podemos escuchar eventos de la siguiente forma:

confirmButton.addEventListener('click', function () {
	console.log('do something');
});

En algunos casos podemos querer eliminar el listener que hemos creado anteriormente (por ejemplo, solo quiero permitir la descarga una vez). Para hacer esto normalmente tenemos que declarar la función fuera del listener, para poder pasarla como referencia:

function downloadItem() {
	// ...
}

downloadButton.addEventListener('click', downloadItem);

// más adelante

downloadButton.removeEventListener('click', downloadItem);

Sin embargo, también podemos usar el AbortController para eliminar el listener de forma tal vez más cómoda:

const controller = new AbortController();

downloadButton.addEventListener('click', () => {
	console.log('downloading...');
}, { signal: controller.signal });

// más adelante
controller.abort(); // esto desactiva el listener

Ambas opciones son completamente válidas, aunque a mí personalmente me gusta mucho el uso del AbortController ya que es algo reutilizable entre varios componentes de la aplicación.