¿Qué son los eventos en JavaScript?

JavaScript proporciona mecanismos para gestionar estos eventos y ejecutar código específico en respuesta, lo que permite que su aplicación web sea interactiva y dinámica.

Tipos de eventos comunes

Explicación de addEventListener() y cómo adjuntar escuchadores de eventos

Para responder a eventos en JavaScript, se adjunta un escuchador de eventos a un elemento. El método más común para hacerlo es la función addEventListener(), que escucha eventos específicos y llama a una función cuando ocurre el evento.

element.addEventListener('event', function, useCapture);

• event: El tipo de evento que se desea escuchar (por ejemplo, 'click', 'submit');
• function: La función de devolución de llamada que se ejecuta cuando se dispara el evento;
• useCapture (opcional): Un valor booleano que indica si el evento debe capturarse durante la fase de captura o de burbujeo (el valor predeterminado es false, lo que significa que escucha durante la fase de burbujeo).

Escuchador de eventos de clic

Se adjunta un escuchador de eventos click al botón. Al hacer clic, se activa una alerta.

El escuchador de eventos está adjunto al elemento #myButton, y cuando el usuario hace clic en el botón, aparece un cuadro de mensaje con el texto "Button clicked!"

Escuchador de eventos submit

Agregar un escuchador de eventos para el evento submit, evitando el comportamiento predeterminado de envío del formulario para gestionar los datos con JavaScript.

Un escuchador de eventos en el evento submit del formulario evita el envío predeterminado con event.preventDefault(), permitiendo que JavaScript personalizado gestione los datos. Al enviar el formulario, el nombre ingresado se recupera y se muestra en un párrafo con el ID displayName.

Evento Keypress

Se adjunta un escuchador de eventos keypress al campo de entrada. Cuando se presiona una tecla, se mostrará en el párrafo.

Cada vez que se presiona una tecla al escribir en el campo de entrada, la tecla presionada se registra en la consola.

Ejemplo práctico: Gestión de la validación de formularios al enviar

Creación de una lógica para la validación del formulario antes del envío del mismo.

El listener del evento submit garantiza que el formulario no se envíe si los campos obligatorios están vacíos. Si el campo de nombre de usuario o contraseña está vacío, se evita que el evento continúe y se muestra un mensaje de error.