Curso de JavaScript
Dale vida a la web.
Aprende a programar, crea interacciones y construye proyectos reales.
Los formularios tienen sus propios eventos: submit se dispara al enviarlos e input se dispara mientras el usuario escribe. Junto con preventDefault y .value, controlas todo el flujo sin recargar la página.
Explicación
Los formularios disparan sus propios eventos, distintos a un simple clic:
formulario.addEventListener("submit", funcion)Se ejecuta cuando el usuario envía el formulario (clic en el botón submit o Enter dentro de un input).
evento.preventDefault()Cancela la acción por defecto del evento; en un submit, evita que el navegador recargue la página.
input.addEventListener("input", funcion)Se ejecuta cada vez que el valor del campo cambia, mientras el usuario escribe.
input.valueContiene el texto actual escrito dentro del campo en ese momento.
Reto rápido
Cambia el mensaje de saludo.textContent y confirma que se actualiza cada vez que envías el formulario con un nombre distinto.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
preventDefault() no cancela el evento en sí: tu función sigue ejecutándose con normalidad, solo evita el comportamiento automático que el navegador aplicaría después (como recargar la página en un submit).
Dato extra
El evento "change" es parecido a "input", pero solo se dispara cuando el campo pierde el foco y su valor cambió, no en cada tecla presionada.
Error común
Olvidar evento.preventDefault() en el submit: el formulario se envía de la forma tradicional y el navegador recarga la página, perdiendo cualquier cambio hecho con JavaScript.
Siguiente paso
Ya sabes reaccionar al envío y la escritura en un formulario. Ahora veamos delegación de eventos: cómo manejar clics de muchos elementos con un solo listener.
Ir a la siguiente lección