Módulo 2 · Intermedio20 min

Eventos

Click, teclado, formulario, delegación de eventos.

Recompensa al completar

Insignia “Event handler” · +20 puntos

¿Qué son los eventos?

Los eventos son acciones que ocurren en la página web: clics, pulsaciones de teclas, etc.

addEventListener

javascript

let boton = document.getElementById("mi-boton");
boton.addEventListener("click", function() {
    console.log("¡Clic!");
});

Eventos comunes

Evento	Descripción
`click`	Clic del ratón
`keydown`	Tecla presionada
`submit`	Envío de formulario
`mouseover`	Ratón sobre elemento
`input`	Cambio en input

Evento con parámetros

javascript

function handleClick(event) {
    console.log(event.target);
}
boton.addEventListener("click", handleClick);

Delegación de eventos

javascript

document.querySelector("ul").addEventListener("click", function(e) {
    if (e.target.tagName === "LI") {
        console.log("Clic en:", e.target.textContent);
    }
});

?Ejercicio

Crea un botón que cambie de color al hacer clic, usando addEventListener.

editor.js

123456

Recompensa al completar

Insignia “Event handler” · +20 puntos