🎯 NIVEL 15

Eventos JavaScript - ¡Interactividad total!

📊 Progreso del Nivel 15 0%
📖 Eventos en JavaScript

🎯 ¿Qué son los Eventos?

Los eventos son acciones que ocurren en la página: clics, teclas presionadas, movimientos del mouse, etc. JavaScript puede "escuchar" estos eventos y responder a ellos.

💡 Eventos = Disparadores

Piensa en los eventos como botones que disparan acciones. ¡Tú decides qué pasa cuando el usuario hace algo!

🎮 Eventos más comunes:

click
Al hacer clic
mouseover
Mouse encima
mouseout
Mouse sale
keydown
Tecla presionada
input
Al escribir
submit
Enviar formulario

📝 Formas de agregar eventos:

// Forma 1: En el HTML
<button onclick="saludar()">Clic</button>

// Forma 2: addEventListener (recomendada)
boton.addEventListener("click", function() {
    alert("¡Hiciste clic!");
});

// Forma 3: Con función separada
boton.addEventListener("click", saludar);

function saludar() {
    alert("¡Hola!");
}
💻 Editor de Eventos
👁️ Vista Previa Interactiva
🎮 Actividad 1: Prueba los Eventos

Interactúa con cada caja para activar diferentes eventos:

👆
CLICK
Haz clic aquí
👆👆
DOUBLE CLICK
Doble clic rápido
🖱️
MOUSE OVER
Pasa el mouse
🖱️
RIGHT CLICK
Clic derecho

⌨️ Evento de teclado:

Esperando que escribas...
Actividad 2: Quiz de Eventos

1. ¿Cuál es el método recomendado para agregar eventos?

2. ¿Qué evento se dispara al escribir en un input?

3. ¿Qué evento se dispara cuando el mouse entra a un elemento?