Curso de JavaScript para Principiantes - Lección 10: Eventos: Hacer que la Web Responda

¡Bienvenido a la décima lección! Hasta ahora, has aprendido a manipular el DOM para cambiar el contenido y los estilos de una página web. Pero, ¿cómo haces que tu página reaccione cuando un usuario hace clic en un botón, escribe en un formulario o pasa el ratón por encima de un elemento? Aquí entran los eventos, que son como sensores que detectan acciones del usuario (o del sistema) y ejecutan código en respuesta. Si en PHP procesas formularios enviados al servidor, en JavaScript puedes manejar interacciones en tiempo real directamente en el navegador.

¿Qué son los eventos?

Un evento es algo que ocurre en la página web, como un clic, una tecla presionada, el envío de un formulario o incluso el cambio de tamaño de la ventana. JavaScript te permite "escuchar" estos eventos y ejecutar una función (llamada manejador de eventos) cuando ocurren.

Ejemplo mental: Imagina que tu página es un restaurante. Los eventos son las acciones de los clientes (pedir comida, pagar, salir), y los manejadores de eventos son los camareros que responden a esas acciones (traer el plato, procesar el pago).

Conexión con PHP: En PHP, manejas eventos del lado del servidor, como cuando un usuario envía un formulario ($_POST). En JavaScript, manejas eventos del lado del cliente, como cuando el usuario hace clic o escribe, sin necesidad de recargar la página.

1. Escuchando Eventos

Para responder a un evento, asocias un elemento del DOM con un tipo de evento y una función que se ejecutará cuando ocurra.

Métodos principales para escuchar eventos:

Propiedad onevent: Asigna una función directamente al elemento (por ejemplo, onclick).
Método addEventListener: Añade un manejador de eventos de forma más flexible y moderna.

Ejemplo con onclick:

<button id="boton">Haz clic</button>
<script>
  let boton = document.getElementById("boton");
  boton.onclick = function() {
    alert("¡Clic detectado!");
  };
</script>

Ejemplo con addEventListener (recomendado):

<button id="boton">Haz clic</button>
<script>
  let boton = document.getElementById("boton");
  boton.addEventListener("click", function() {
    alert("¡Clic detectado con addEventListener!");
  });
</script>

Por qué usar addEventListener:

Puedes añadir múltiples manejadores para el mismo evento sin sobrescribir los anteriores.
Es más flexible y moderno.
Permite remover manejadores si es necesario.

2. Tipos de Eventos Comunes

Hay muchos tipos de eventos. Aquí algunos de los más usados:

Evento	Descripción	Ejemplo de uso
`click`	Clic en un elemento	Botones, enlaces
`input`	Cambio en un campo de entrada	Campos de texto, formularios
`submit`	Envío de un formulario	Validación de formularios
`mouseover`	Ratón pasa por encima de un elemento	Efectos hover
`mouseout`	Ratón sale de un elemento	Efectos hover
`keydown`	Presionar una tecla	Juegos, atajos de teclado

Ejemplo práctico:

<input id="entrada" type="text" placeholder="Escribe algo">
<div id="caja">Pasa el ratón</div>
<script>
  let entrada = document.getElementById("entrada");
  let caja = document.getElementById("caja");

  // Evento input: Detecta cambios en el input
  entrada.addEventListener("input", function() {
    console.log("Texto ingresado: " + entrada.value);
  });

  // Evento mouseover: Cambia el estilo al pasar el ratón
  caja.addEventListener("mouseover", function() {
    caja.style.backgroundColor = "yellow";
  });

  // Evento mouseout: Restaura el estilo
  caja.addEventListener("mouseout", function() {
    caja.style.backgroundColor = "";
  });
</script>

3. El Objeto `event`

Cuando ocurre un evento, JavaScript pasa un objeto event (o e) al manejador, que contiene información sobre el evento, como qué tecla se presionó o en qué coordenadas se hizo clic.

Ejemplo con event:

<input id="entrada" type="text">
<script>
  let entrada = document.getElementById("entrada");
  entrada.addEventListener("keydown", function(event) {
    console.log("Tecla presionada: " + event.key);
    if (event.key === "Enter") {
      console.log("¡Enter presionado! Texto: " + entrada.value);
    }
  });
</script>

Propiedades comunes del objeto event:

event.target: El elemento que disparó el evento.
event.key: La tecla presionada (para eventos de teclado).
event.preventDefault(): Evita el comportamiento por defecto (por ejemplo, el envío de un formulario).

4. Ejemplo Realista: Formulario Interactivo

Vamos a crear un formulario que valida el nombre ingresado y muestra un mensaje, algo que podrías comparar con un formulario en PHP que valida datos antes de procesarlos.

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Formulario</title>
  <style>
    .error { color: red; }
    .success { color: green; }
  </style>
</head>
<body>
  <form id="formulario">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre">
    <button type="submit">Enviar</button>
  </form>
  <p id="mensaje"></p>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

let formulario = document.getElementById("formulario");
let nombreInput = document.getElementById("nombre");
let mensaje = document.getElementById("mensaje");

formulario.addEventListener("submit", function(event) {
  event.preventDefault(); // Evita que el formulario se envíe al servidor

  let nombre = nombreInput.value.trim();
  if (nombre.length < 3) {
    mensaje.textContent = "El nombre debe tener al menos 3 caracteres.";
    mensaje.className = "error";
  } else {
    mensaje.textContent = `¡Hola, ${nombre}! Formulario enviado.`;
    mensaje.className = "success";
    nombreInput.value = ""; // Limpia el input
  }
});

Cómo funciona:

El evento submit se dispara al enviar el formulario.
event.preventDefault() evita que la página se recargue (como ocurriría en PHP sin JavaScript).
Se valida el nombre y se muestra un mensaje con estilo de error o éxito.
El input se limpia tras un envío exitoso.

Conexión con PHP: Esto es como validar $_POST['nombre'] en PHP, pero en JavaScript ocurre en el navegador, dando retroalimentación inmediata sin recargar la página.

5. Buenas Prácticas

Usa addEventListener: Es más flexible que las propiedades como onclick.
Valida entradas: Siempre verifica los datos del usuario antes de procesarlos.
Evita manejadores inline: No uses <button onclick="miFuncion()">. Separa el JavaScript en un archivo o <script>.
Usa event.preventDefault() cuando sea necesario: Por ejemplo, para formularios que no deben enviarse al servidor.
Prueba en un entorno real: Usa JSFiddle o un archivo HTML local para ver los eventos en acción.

Ejercicios Prácticos

Botón de cambio de color:
- Crea un HTML con un <div> y un <button>.
- Al hacer clic en el botón, cambia el color de fondo del <div> a un color aleatorio (usa Math.random() para generar valores RGB).
Contador de clics:
- Crea un HTML con un <button> y un <p> que muestre "Clics: 0".
- Cada vez que se haga clic en el botón, incrementa el contador en el <p>.
Validación de input:
- Crea un HTML con un <input> tipo texto y un <p> para mensajes.
- Al escribir en el input (evento input), muestra "Válido" si el texto tiene más de 5 caracteres, o "Demasiado corto" si no.
Mini app de tareas mejorada:
- Basándote en el ejemplo de la Lección 9 (lista de tareas), añade un evento para que, al hacer clic en una tarea (<li>), se marque como completada (por ejemplo, cambiando su color o añadiendo una clase CSS).
- Opcional: Añade un botón para eliminar tareas.

Instrucción: Prueba estos ejercicios en JSFiddle o en un archivo HTML local con un <script>. Por ejemplo:

<button id="boton">Clic</button>
<script>
  document.getElementById("boton").addEventListener("click", () => {
    console.log("¡Clic!");
  });
</script>

Para la Próxima Lección

En la Lección 11, exploraremos la programación asíncrona con promesas y async/await, que te permitirán manejar tareas como cargar datos de un servidor (similar a consultas a bases de datos en PHP). ¡Sigue practicando los eventos con los ejercicios de hoy para estar listo!

Apuntes javascript