Las aplicaciones web modernas funcionan basándose en eventos que se generan constantemente y sobre los cuales es necesario reaccionar. En ocasiones, nos encontramos con eventos de larga duración o procesos que, una vez ejecutados bajo ciertas condiciones, ya no necesitan seguir activos. Para gestionar esto de manera eficiente, JavaScript nos permite abortar eventos utilizando señales mediante el DOM.
La gestión de eventos con addEventListener
El método .addEventListener() es la base de la interactividad en la web. Este método no solo permite definir el controlador de eventos (callback), sino que también acepta un objeto de opciones adicionales. Estas opciones nos permiten configurar comportamientos específicos, como ejecutar un evento solo una vez o modificar el comportamiento por defecto (evitando, por ejemplo, el .preventDefault()).
Implementación práctica: El controlador de señales
Para aprender a abortar eventos, realizaremos un ejemplo sencillo capturando la pulsación de un botón (button) mediante el evento onclick. El proceso para detener la escucha de un evento sigue estos pasos:
- Crear un controlador de señal: Se utiliza la interfaz AbortController.
- Asignar el controlador: Se pasa la señal (signal) como parte de las opciones del addEventListener.
- Ejecutar la interrupción: Se invoca el método abort() del controlador cuando se cumpla la condición deseada.
Ejemplo de código
Imaginemos que queremos limitar el número de veces que se procesa el clic en un botón. Podemos crear una variable valor que actúe como contador. Una vez que alcancemos el límite establecido, llamaremos al controlador para abortar la señal:
const controller = new AbortController();const button = document.querySelector('button');button.addEventListener('click', () => { // Lógica del contador valor++; if (valor >= limite) { controller.abort(); // Se cancela el evento }}, { signal: controller.signal });De esta manera, una vez que se activa la señal de aborto, el evento click dejará de responder y el contador ya no se verá incrementado. Esta técnica es fundamental para optimizar el rendimiento y evitar la ejecución innecesaria de código en el navegador.