Tema 17 · DOM y Eventos

Eventos e Interactividad (addEventListener)

Aprende a escuchar y responder a acciones del usuario con addEventListener: clics, teclado, formularios, el objeto de evento y e.preventDefault().

Modificar Contenido, Atributos y CSS Creación y Eliminación Dinámica de Nodos

¿Qué son los Eventos?

Los eventos son señales que emite el navegador cuando ocurre una acción: el usuario hace clic en un botón, escribe en un campo de texto, envía un formulario o presiona una tecla.

El método estándar de la industria para escuchar eventos es addEventListener(), el cual permite asociar múltiples manejadores a un mismo elemento sin sobrescribir código previo: 

elemento.addEventListener("tipoDeEvento", function(event) {
  // Código que se ejecuta cuando ocurre el evento
});

Eventos Más Utilizados en la Web

Evento Cuándo se Dispara Uso Habitual
click Al hacer clic con el ratón o pulsar en pantalla táctil. Botones, enlaces dinámicos, menús desplegables.
input Cada vez que el valor de un <input> o <textarea> cambia. Validación en vivo, contadores de caracteres, búsquedas.
submit Al intentar enviar un elemento <form>. Validación de formularios antes de enviar por AJAX/fetch.
keydown / keyup Al presionar o soltar una tecla del teclado. Atajos de teclado, navegación con flechas, tecla Enter.
DOMContentLoaded Cuando el árbol HTML ha sido cargado por completo. Inicializar scripts de manera segura.

El Objeto de Evento (event) y preventDefault()

El manejador recibe automáticamente un objeto con información detallada de lo sucedido:

  • event.target: Referencia al elemento HTML exacto que disparó el evento.
  • event.key: Nombre de la tecla pulsada (ej: "Enter", "Escape").
  • event.preventDefault(): Cancela el comportamiento por defecto del navegador (por ejemplo, evita que la página se recargue al enviar un formulario).

⚡ Formulario Reactivo con Validación en Vivo y Contador

Observa cómo addEventListener captura eventos de escritura (input) y previene la recarga del formulario (submit):

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Eventos con addEventListener</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-form { max-width: 480px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .form-group { margin-bottom: 15px; }
    label { display: block; margin-bottom: 6px; font-weight: 600; color: #0f172a; font-size: 0.9rem; }
    input[type="text"], textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.95rem; }
    .contador { text-align: right; font-size: 0.8rem; color: #64748b; margin-top: 4px; }
    .limite-cerca { color: #ea580c; font-weight: bold; }
    button[type="submit"] { background: #0284c7; color: white; border: none; padding: 10px 18px; border-radius: 6px; font-weight: bold; cursor: pointer; width: 100%; }
    button[type="submit"]:hover { background: #0369a1; }
    .mensaje-exito { display: none; background: #dcfce7; color: #166534; border: 1px solid #86efac; padding: 12px; border-radius: 6px; margin-top: 15px; }
  </style>
</head>
<body>

  <div class="card-form">
    <h3 style="margin-top: 0; color: #0f172a;">Publicar Comentario</h3>

    <form id="formulario-comentario">
      <div class="form-group">
        <label for="nombre">Nombre Completo:</label>
        <input type="text" id="nombre" name="nombre" placeholder="Ej: Santiago Andrés Gómez" required>
      </div>

      <div class="form-group">
        <label for="mensaje">Mensaje (máximo 80 caracteres):</label>
        <textarea id="mensaje" name="mensaje" rows="3" maxlength="80" placeholder="Escribe tu opinión aquí..."></textarea>
        <div class="contador" id="indicador-caracteres">0 / 80 caracteres</div>
      </div>

      <button type="submit" id="btn-enviar">Publicar Comentario</button>
    </form>

    <div class="mensaje-exito" id="caja-exito"></div>
  </div>

  <script>
    const formulario = document.getElementById('formulario-comentario');
    const campoMensaje = document.getElementById('mensaje');
    const indicador = document.getElementById('indicador-caracteres');
    const cajaExito = document.getElementById('caja-exito');

    // 1. Escuchar evento 'input' para conteo reactivo
    campoMensaje.addEventListener('input', function(e) {
      const longitud = e.target.value.length;
      indicador.textContent = `${longitud} / 80 caracteres`;

      if (longitud >= 70) {
        indicador.classList.add('limite-cerca');
      } else {
        indicador.classList.remove('limite-cerca');
      }
    });

    // 2. Escuchar evento 'submit' con preventDefault
    formulario.addEventListener('submit', function(e) {
      e.preventDefault(); // Evita recargar la página

      const autor = document.getElementById('nombre').value;
      const texto = campoMensaje.value;

      cajaExito.style.display = 'block';
      cajaExito.innerHTML = `<strong>¡Comentario publicado con éxito!</strong><br><em>"${texto}"</em> — por <strong>${autor}</strong>.`;

      formulario.reset();
      indicador.textContent = "0 / 80 caracteres";
      indicador.classList.remove('limite-cerca');
    });
  </script>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.