Evento (programación)

En la programación basada en eventos, el código no se ejecuta de arriba abajo sin más: registras funciones (manejadores) que se ejecutan cuando ocurre algo.

En la web, addEventListener("click", funcion) asocia una función al clic de un botón. Las aplicaciones de escritorio y móvil funcionan con la misma idea.

Un ejemplo

Al escribir en un buscador, el evento input se dispara con cada letra y el código muestra sugerencias.

Por qué importa

Los eventos son lo que hace que una aplicación reaccione al usuario: un clic, una tecla pulsada, un formulario enviado o el fin de la carga de una página. En lugar de que el programa vaya de principio a fin, se queda esperando y ejecuta el código asociado cuando algo ocurre. Es la base de todas las interfaces interactivas.

No solo se dan en el navegador. Las aplicaciones de escritorio, los servidores y Node.js también se organizan alrededor de eventos, como una petición recibida o un archivo que termina de leerse. Entender este modelo explica por qué el código de un manejador no se ejecuta cuando lo escribes, sino cuando sucede lo esperado.

Confusiones frecuentes

Un error clásico es escribir boton.addEventListener("click", saludar()) con paréntesis: eso ejecuta saludar inmediatamente y pasa su resultado, cuando lo correcto es pasar la función sin llamarla, saludar. Otra confusión es la propagación: un clic en un elemento interior también se notifica a sus padres, lo que puede disparar manejadores inesperados, y se controla con stopPropagation(). Tampoco hay que confundir el evento, lo que ocurre, con el manejador, el código que responde.

Preguntas frecuentes

¿Cómo evito que un formulario recargue la página?

Llama a evento.preventDefault() dentro del manejador del evento submit.

¿Qué es la delegación de eventos?

Poner un solo manejador en el elemento padre en lugar de uno por cada hijo, y comprobar con evento.target cuál fue el origen. Funciona también con elementos creados después.