CodeAventura
JavaScript en el DOM
▸Contenido y eventos▸Objeto event y preventDefault

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Event object</title>
  </head>
  <body>
    <form id="form-login">
      <input name="email" type="email" placeholder="correo@dom.com" />
      <button type="submit">Entrar</button>
    </form>
    <p id="estado-login">Pendiente</p>

    <script src="script.js"></script>
  </body>
</html>
●localhost:5173
10 / 16Objeto event y preventDefault
Anterior

Objeto event y preventDefault

Qué te entrega realmente un evento

Cuando ocurre un evento, JavaScript no te llama con las manos vacías. Te pasa un objeto con toda la información sobre lo que pasó: ese es el objeto event.

Para recibirlo, decláralo como parámetro del callback:

Propiedades más útiles del objeto event

event.target

El elemento exacto que disparó el evento. Si tienes varios botones y un solo listener, event.target te dice cuál fue clickeado:

event.type

El tipo de evento que ocurrió ("click", "submit", "input", etc.):

event.currentTarget

El elemento al que añadiste el listener (no necesariamente el que disparó el evento). Útil en delegación de eventos cuando el elemento que escucha no es el mismo que disparó.

El problema del comportamiento por defecto

Algunos elementos tienen comportamientos automáticos del navegador:

  • <form> recarga la página al hacer submit
  • <a> navega a otra URL al hacer clic

Si quieres tomar control de esa acción desde JavaScript, usa:

Esto cancela el comportamiento nativo y te deja ejecutar tu propia lógica.

Patrón típico en formularios

Este patrón es la base de cualquier login, registro o checkout moderno.

Tu desafío 🚀

  1. Escucha el submit de #form-login
  2. Usa event.preventDefault() para evitar la recarga
  3. Lee event.target para acceder al formulario
  4. Actualiza #estado-login con un mensaje que incluya el email introducido

Controlar el evento es controlar la experiencia del usuario.