Eventos: Escuchar el mundo

🎯 Objetivo

Escuchar eventos (click, submit, keyup) con addEventListener. Interactividad completa.

⚔️ Implementación

// CLICK
const boton = document.querySelector("#btn");
boton.addEventListener("click", () => {
  console.log("¡Clic!");
});

// Con parámetro event
boton.addEventListener("click", (e) => {
  console.log(e.target); // Elemento clickeado
});

// SUBMIT (formularios)
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  e.preventDefault(); // Evita recargar página
  const nombre = document.querySelector("#nombre").value;
  console.log(`Hola, ${nombre}`);
});

// INPUT (detecta escritura)
const input = document.querySelector("#buscar");
input.addEventListener("input", (e) => {
  console.log(e.target.value); // Lo que escribiste
});

// KEYUP (tecla soltada)
input.addEventListener("keyup", (e) => {
  if (e.key === "Enter") {
    console.log("Presionaste Enter");
  }
});

// CHANGE (select, checkbox)
const select = document.querySelector("select");
select.addEventListener("change", (e) => {
  console.log(e.target.value);
});

// MOUSEENTER/MOUSELEAVE
const caja = document.querySelector(".caja");
caja.addEventListener("mouseenter", () => {
  caja.style.backgroundColor = "blue";
});
caja.addEventListener("mouseleave", () => {
  caja.style.backgroundColor = "white";
});

// DELEGACIÓN (eventos en elementos dinámicos)
document.querySelector("#lista").addEventListener("click", (e) => {
  if (e.target.matches(".item")) {
    console.log("Clickeaste un item");
  }
});

🎯 Reto Ninja

MISIÓN DE REACCIÓN

⚡ El Eco del Mundo

1

Crea una estructura HTML con un <input id="tarea">, un <button id="agregar"> y una <ul id="lista"> vacía.

2

En JS, selecciona el botón y añade un addEventListener para el evento "click".

3

Al hacer clic, captura el valor del input, crea un nuevo elemento <li> y añádelo a la lista.

4

Limpia el cuadro de texto del input después de agregar la tarea. ¡Tu primera To-Do List está viva!

Consejo del Sensei: No olvides usar e.preventDefault() si tu botón está dentro de un <form>, de lo contrario la página se recargará y perderás tu progreso.

🔓 Bonus

// Remove listener
const handler = () => console.log("Clic");
btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);

// Once (solo una vez)
btn.addEventListener("click", () => {
  console.log("Solo una vez");
}, { once: true });

// Passive (mejor performance)
window.addEventListener("scroll", () => {
  console.log("Scroll");
}, { passive: true });

✅ Checklist de Dominio

INTERACTIVIDAD DOMINADA

Pergamino de Reacción

¡FELICIDADES! Has completado el Módulo 2: Frontend 🎉

Ahora eres un ninja Chunin 🗡️. Dominas HTML, CSS y JavaScript.

Próximo desafío: Boss Fight - “El Error Sin Commit”