Eventos y formularios en JavaScript: click, input, submit y validaciones

Los eventos permiten que JavaScript responda a acciones del usuario o cambios que ocurren en la página.

addEventListener

addEventListener() conecta una función con un evento. Cuando ese evento ocurre, JavaScript ejecuta la función que registramos.

<button id="boton">Hacer clic</button>

const boton = document.querySelector("#boton");

boton.addEventListener("click", () => {
    console.log("El usuario hizo clic");
});

Objeto event

El objeto event contiene información sobre lo ocurrido, por ejemplo qué elemento originó el evento mediante event.target.

boton.addEventListener("click", event => {
    console.log(event.target);
});

Evento input

input se dispara cada vez que cambia el valor de un campo mientras el usuario escribe o interactúa con él.

<input id="nombre" type="text">
<p id="salida"></p>

const input = document.querySelector("#nombre");
const salida = document.querySelector("#salida");

input.addEventListener("input", event => {
    salida.textContent = event.target.value;
});

Evento change

change suele utilizarse cuando queremos reaccionar al cambio confirmado de un control, como un select o un checkbox.

change suele utilizarse cuando nos interesa reaccionar al cambio confirmado de un control, por ejemplo un select.

submit

El evento submit pertenece al formulario, no al botón. Escucharlo en el formulario permite capturar envíos realizados tanto con clic como con la tecla Enter.

<form id="formulario">
    <label for="email">Correo</label>
    <input id="email" name="email" type="email">
    <button type="submit">Enviar</button>
</form>

const formulario = document.querySelector("#formulario");

formulario.addEventListener("submit", event => {
    event.preventDefault();

    console.log("Formulario interceptado");
});

preventDefault()

preventDefault() evita la acción automática del navegador asociada al evento. En formularios nos permite validar o procesar los datos antes de decidir qué hacer.

Evita el comportamiento por defecto del navegador. En un formulario, por ejemplo, impide el envío tradicional mientras procesamos los datos con JavaScript.

Leer valores

const email = document.querySelector("#email");

formulario.addEventListener("submit", event => {
    event.preventDefault();

    console.log(email.value);
});

FormData

FormData reúne los campos de un formulario usando sus atributos name. Así podemos leer sus valores sin seleccionar cada input por separado.

formulario.addEventListener("submit", event => {
    event.preventDefault();

    const datos = new FormData(formulario);

    console.log(datos.get("email"));
});

Validación simple

formulario.addEventListener("submit", event => {
    event.preventDefault();

    const email = document.querySelector("#email").value.trim();

    if (email === "") {
        console.log("El correo es obligatorio");
        return;
    }

    console.log("Formulario válido");
});

HTML y JavaScript se complementan

HTML ya ofrece atributos como required, minlength o type="email". JavaScript puede agregar reglas de negocio y mensajes más específicos.

Delegación de eventos

La delegación consiste en escuchar el evento en un elemento padre y detectar qué hijo lo originó. Es especialmente útil cuando los elementos se crean dinámicamente.

<ul id="tareas">
    <li data-id="1">Estudiar</li>
    <li data-id="2">Practicar</li>
</ul>

const tareas = document.querySelector("#tareas");

tareas.addEventListener("click", event => {
    if (event.target.matches("li")) {
        console.log(event.target.dataset.id);
    }
});

La delegación resulta muy útil para listas dinámicas.

Ejercicio

Creá un formulario con nombre y edad. Validá que el nombre tenga al menos 3 caracteres y que la edad sea mayor que 0. Mostrá mensajes en el DOM sin recargar la página.

Errores comunes

• olvidar preventDefault();
• registrar el listener sobre el elemento equivocado;
• leer valores sin aplicar trim() cuando corresponde;
• depender solo de validación del cliente para seguridad;
• crear listeners repetidos innecesariamente.

Seguí aprendiendo JavaScript

← DOM en JavaScript: seleccionar, modificar y crear elementos HTML

JavaScript asíncrono: Promises, async/await, fetch y APIs →