Estudio de Eventos en JavaScript

Documentación del artículo de MDN "Introducción a los eventos": qué es un evento, cómo registrarlo con addEventListener(), los objetos evento, cómo evitar el comportamiento por defecto con preventDefault() y por qué NO usar manejadores inline. Incluye demos interactivas reproducibles.

Resumen con para qué y cómo, listo para tu OKF/Obsidian.

1 · ¿Qué es un evento? — demo de clic

Un evento es una señal que lanza el navegador cuando ocurre algo (clic, tecla, submit…). Le asocias un detector y una función manejadora responde. Pruébalo:

Haz clic varias veces → cambia el fondo.

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  document.body.style.backgroundColor =
    `rgb(${random(255)} ${random(255)} ${random(255)})`;
});

2 · Uso de addEventListener()

➕ Mecanismo recomendado

Dos parámetros: la cadena del evento ("click", "mouseover", "keydown"…) y la función manejadora.
Permite varios manejadores para el mismo evento (todas se ejecutan).
Se puede eliminar con removeEventListener().

function changeBackground() { /* ... */ }
btn.addEventListener("click", changeBackground);
// varios:
myElement.addEventListener("click", functionA);
myElement.addEventListener("click", functionB);
// eliminar:
btn.removeEventListener("click", changeBackground);

🎯 Otros eventos: focus/blur (validar formularios), dblclick, mouseover/mouseout. Algunos son específicos: play solo en <video>/<audio>.

3 · Otros mecanismos (y por qué NO usar inline)

🖱️ Propiedad de manejador (onclick)

btn.onclick = () => { /* ... */ };
// Desventaja: solo UN manejador (se sobrescribe)

🚫 Inline (NO usar — obsoleto)

<button onclick="bgChange()">Haz clic</button>

⛔ Mezcla HTML+JS, no escala (100 botones = 100 atributos) y algunos servidores bloquean el JS inline. Regla: siempre addEventListener(). Para N botones: document.querySelectorAll("button").forEach(b => b.addEventListener("click", bgChange));

4 · Objetos evento

La función manejadora recibe un parámetro (e, event, evt). e.target = elemento sobre el que ocurrió el evento. KeyboardEvent.key = tecla presionada.

Escribe aquí →

El evento keydown te dirá qué tecla presionaste.

const textBox = document.querySelector("#textBox");
const output = document.querySelector("#output");
textBox.addEventListener("keydown", (event) => {
  output.textContent = `Presionaste "${event.key}".`;
});

5 · Evitar el comportamiento por defecto

Envía el form vacío → se detiene con preventDefault().

form.addEventListener("submit", (e) => {
  if (fname.value === "" || lname.value === "") {
    e.preventDefault();   // detiene el envío
    para.textContent = "¡Debes completar ambos nombres!";
  }
});

🌍 No es solo en páginas web: Node.js usa emisores + detectores (on(), once()); las WebExtensions usan camelCase (onMessage) + addListener.

6 · Grafo animado — el ciclo de un evento

El token 🟠 recorre el ciclo: el elemento lanza el evento → el detector lo captura → el manejador responde. Clic reinicia.

Iniciando…

7 · Referencia

Concepto	Qué es
Evento	Señal que lanza el sistema (clic, tecla, submit…)
Detector	Código que detecta el evento (ej. `addEventListener`)
Manejador	Función que responde al evento
addEventListener()	Mecanismo recomendado; varios manejadores + `removeEventListener()`
onclick (propiedad)	Alternativa; solo un manejador (se sobrescribe)
Inline (onclick="...")	Obsoleto, mala práctica — NO usar
Objeto evento	Parámetro `e` con contexto: `e.target`, `event.key`
preventDefault()	Detiene el comportamiento por defecto (ej. no enviar el form)
Event bubbling	Los eventos de elementos anidados "suben" (siguiente lección MDN)

📦 Regla de librerías (local primero): sin dependencias externas — JavaScript puro del navegador. Fuente: https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Events.