---
type: Resumen
title: "Estudio — Eventos en JavaScript (MDN) · Introducción"
description: "Estudio de mdn-eventos publicado como sitio: scripts minimalistas para implementarlo y cómo se conecta con el OKF."
resource: "https://gerardoesquivia.com/mdn-eventos/"
status: publicado
tags: [estudio, mdn-eventos, scripts-minimalistas, documentacion, okf]
timestamp: 2026-10-04
creator: "Gerardo Esquivia Zapata"
grafo: datos
---

# Estudio — Eventos en JavaScript (MDN) · Introducción

> **Sitio publicado:** https://gerardoesquivia.com/mdn-eventos/
> **Nota generada del sitio** para que el estudio regrese al OKF (REGLA del ciclo:
> la documentación no está completa hasta estar publicada **Y** registrada).

## Cómo usarla

Los **scripts minimalistas** de abajo se copian y funcionan. Esa es la parte que vale:
la prosa se lee y se olvida; un script se pega y arranca.

---

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

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

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:
 

 
 🎨 Cambiar el color
 Haz clic varias veces → cambia el fondo.

## 2 · Uso de addEventListener()

### ➕ Mecanismo recomendado

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

- 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().

 
 
 
 🎯 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)

⛔ 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

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

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.

## 5 · Evitar el comportamiento por defecto

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

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

 

 
 
 🌍 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.
 

 

 
 
 📱 Escanéalo para abrir la documentación

 https://gerardoesquivia.com/mdn-eventos/
 

 
 Eventos en JavaScript (MDN) · OKF de Gerardo Esquivia Zapata · 2026-08-30
 

// --- Demos interactivas ---
(function () {
 function random(number) { return Math.floor(Math.random() * (number + 1)); }
 const btn = document.getElementById('btnColor');
 btn.addEventListener('click', () => {
 const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
 document.body.style.backgroundColor = rndCol;
 });
 const textBox = document.getElementById('textBox');
 const output = document.getElementById('output');
 textBox.addEventListener('keydown', (event) => {
 output.textContent = `Presionaste "${event.key}".`;
 });
 const form = document.getElementById('miForm');
 const fname = document.getElementById('fname');
 const lname = document.getElementById('lname');
 const para = document.getElementById('para');
 form.addEventListener('submit', (e) => {
 if (fname.value === '' || lname.value === '') {
 e.preventDefault();
 para.textContent = '¡Debes completar ambos nombres!';
 } else { para.textContent = '✅ Enviado (demo: no hay servidor).'; }
 });
})();
// --- Grafo animado ---
(function () {
 const nodes = [
 { id: "elem", label: "Elemento", sub: "botón / input", x: 120, y: 180 },
 { id: "event", label: "Evento", sub: "click · keydown", x: 420, y: 180 },
 { id: "det", label: "Detector", sub: "addEventListener", x: 700, y: 90 },
 { id: "man", label: "Manejador", sub: "función (e)", x: 700, y: 270 },
 ];
 const edges = [
 { from: "elem", to: "event", label: "lanza", loop: false },
 { from: "event", to: "det", label: "captura", loop: false },
 { from: "det", to: "man", label: "llama", loop: false },
 { from: "man", to: "elem", label: "responde", loop: false },
 ];
 const pos = Object.fromEntries(nodes.map(n => [n.id, { x: n.x, y: n.y }]));
 const svg = document.getElementById("grafo");
 const NS = "http://www.w3.org/2000/svg";
 function el(tag, attrs) { const e = document.createElementNS(NS, tag); for (const k in attrs) e.setAttribute(k, attrs[k]); return e; }
 const edgePaths = [], edgeArrows = [];
 edges.forEach((ed) => {
 const a = pos[ed.from], b = pos[ed.to];
 let d, mid;
 if (ed.from === "man") { d = `M ${a.x} ${a.y} C ${(a.x+b.x)/2} 380, ${(a.x+b.x)/2} 380, ${b.x} ${b.y}`; mid = { x: (a.x+b.x)/2, y: 330 }; }
 else { const mx = (a.x+b.x)/2; d = `M ${a.x} ${a.y} C ${mx} ${a.y}, ${mx} ${b.y}, ${b.x} ${b.y}`; mid = { x: mx, y: (a.y+b.y)/2 }; }
 const path = el("path", { class: "edge", d }); svg.appendChild(path); edgePaths.push(path);
 const ang = Math.atan2(b.y - mid.y, b.x - mid.x);
 const tx = b.x - 18*Math.cos(ang), ty = b.y - 18*Math.sin(ang);
 const arrow = el("path", { class: "arrow", d: `M ${tx} ${ty} l 8 ${-4} l -8 ${-4} z`, transform: `rotate(${ang*180/Math.PI} ${tx} ${ty})` });
 svg.appendChild(arrow); edgeArrows.push(arrow);
 });
 const nodeGroups = {};
 nodes.forEach(n => {
 const g = el("g", { class: "node" });
 g.appendChild(el("rect", { x: n.x - 70, y: n.y - 29, width: 140, height: 58 }));
 const t = el("text", { class: "t", x: n.x, y: n.y - 4, "text-anchor": "middle" }); t.textContent = n.label;
 const s = el("text", { class: "s", x: n.x, y: n.y + 16, "text-anchor": "middle" }); s.textContent = n.sub;
 g.appendChild(t); g.appendChild(s); svg.appendChild(g); nodeGroups[n.id] = g;
 });
 const travel = el("circle", { class: "travel", r: 6, opacity: 0 });
 svg.appendChild(travel);
 const caption = document.getElementById("caption");
 const N = edges.length;
 let i = 0, raf = null;
 function clearActive() { nodes.forEach(n => nodeGroups[n.id].classList.remove("active")); edgePaths.forEach(p => p.classList.remove("active")); edgeArrows.forEach(a => a.classList.remove("active")); }
 function animateEdge(idx) {
 const ed = edges[idx];
 clearActive();
 edgePaths[idx].classList.add("active"); edgeArrows[idx].classList.add("active");
 nodeGroups[ed.from].classList.add("active");
 caption.innerHTML = `Paso ${idx+1}/${N}: ${ed.from} → ${ed.to} (${ed.label})`;
 const path = edgePaths[idx], len = path.getTotalLength();
 const t0 = performance.now(), dur = 900;
 function step(now) { let p = (now-t0)/dur; if (p>1) p=1; const pt = path.getPointAtLength(p*len); travel.setAttribute("cx", pt.x); travel.setAttribute("cy", pt.y); travel.setAttribute("opacity", 1); if (p animateEdge(i), 320); } }
 raf = requestAnimationFrame(step);
 }
 function start() { cancelAnimationFrame(raf); i = 0; animateEdge(0); }
 svg.addEventListener("click", start);
 start();
})();

---
type: Resumen
title: "🌐 Estudio: Eventos en JavaScript (MDN) — Introducción"
description: "Nota OKF del artículo de MDN: qué es un evento, addEventListener/removeEventListener, objetos evento, preventDefault y burbujeo."
fuente: "https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Events"
sitio: "https://gerardoesquivia.com/mdn-eventos/"
tags: [resumen, javascript, eventos, dom, mdn, tutorial, okf]
timestamp: 2026-08-30
creator: "Gerardo Esquivia Zapata"
---

# 🌐 Eventos en JavaScript (MDN) — Introducción

> **Para qué:** entender qué son los eventos del navegador y cómo reaccionar con código de forma correcta y escalable.
> **Cómo:** addEventListener() es el mecanismo recomendado; se evitan los manejadores inline; el objeto evento da contexto (e.target, event.key); preventDefault() detiene el comportamiento por defecto. Sitio: https://gerardoesquivia.com/mdn-eventos/

## 🎯 Para qué sirve
- Detectar acciones del usuario (clic, teclado, focus, envío de formulario…) y responder ejecutando código.
- Registrar/eliminar manejadores de forma limpia y escalable (evita el patrón inline obsoleto).
- Validar formularios deteniendo el envío con preventDefault().

## 🛠️ Cómo se usa — scripts minimalistas

### 1. addEventListener — clic (random color)
```html
Cambiar el color
```
```js
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
 document.body.style.backgroundColor = `rgb(${random(255)} ${random(255)} ${random(255)})`;
});
```

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

### 3. Evitar el comportamiento por defecto — validar formulario
```js
form.addEventListener("submit", (e) => {
 if (fname.value === "" || lname.value === "") {
 e.preventDefault();
 para.textContent = "¡Debes completar ambos nombres!";
 }
});
```

## 🔑 Conceptos clave
| Concepto | Qué es |
|---|---|
| Evento | Señal que lanza el sistema cuando ocurre algo (clic, tecla, submit…) |
| Detector | Código que detecta el evento (ej. addEventListener) |
| Manejador | Función que responde al evento |
| addEventListener() | Mecanismo recomendado; permite varios manejadores y removeEventListener() |
| onclick (propiedad) | Alternativa; solo un manejador (se sobrescribe) |
| Inline (onclick="...") | Obsoleto, mala práctica — NO usar |
| Objeto evento | Parámetro e/event/evt con contexto (e.target, event.key) |
| preventDefault() | Detiene el comportamiento por defecto (ej. no enviar el form) |
| Event bubbling | Al hacer clic en un elemento anidado, el evento "sube" (siguiente lección) |

## 🌍 No es solo en páginas web
- Node.js: on() registra, once() se elimina tras ejecutarse; emisores + detectores.
- WebExtensions: propiedades camelCase (onMessage) + addListener.

## 🔗 Fuente
https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Events
Sitio: https://gerardoesquivia.com/mdn-eventos/
Siguiente lección (burbujeo): https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Event_bubbling

## 📥 Cómo agregar esto a tu OKF (para el agente)
1. Guarda esta nota en `📋 Proyectos/`.
2. Los ejemplos reproducibles están en `insumos/mdn-eventos-javascript.md` (código fuente MDN).
3. Es la base de `Event_bubbling` (siguiente lección del mismo módulo Core/Scripting de MDN).
---

function descargarMD() {
 const md = document.getElementById('md-resumen').textContent.trim();
 const blob = new Blob([md], { type: 'text/markdown;charset=utf-8' });
 const url = URL.createObjectURL(blob);
 const a = document.createElement('a');
 a.href = url;
 a.download = 'resumen-mdn-eventos.md';
 document.body.appendChild(a); a.click(); a.remove();
 URL.revokeObjectURL(url);
}

---

## Cómo se conecta con el OKF

- **Sitio:** https://gerardoesquivia.com/mdn-eventos/
- **Nota:** esta (bajada del sitio, para consulta del agente)
- **Fuente:** https://gerardoesquivia.com/mdn-eventos/

## Aprendizajes

- Los scripts minimalistas son el activo: **el ejemplo más corto que demuestra el uso**.
- Este estudio forma parte del ciclo: **estudiar → publicar → registrar en el OKF**.