10 Ejercicios resueltos de eventos en JavaScript (addEventListener y DOM) + aprendizaje teórico
Aprende a manejar eventos con
addEventListenery el DOM en JavaScript. Domina la interacción con ejemplos prácticos y ejercicios, potenciaras tus habilidades de desarrollo web.
Aprendizaje teórico
Los eventos en JavaScript permiten responder a las acciones del usuario o del sistema en un sitio web, como hacer clic en un botón, mover el ratón, presionar teclas y mucho más. Para ello, contamos con addEventListener, un método que “escucha” un evento específico (por ejemplo, click) y ejecuta una función (denominada manejador de eventos) cuando ese evento ocurre. De esta manera, podemos controlar la interacción y actualizar el DOM (Document Object Model) dinámicamente.
El DOM es la estructura que representa a nuestra página web en forma de árbol de nodos. Cada etiqueta HTML se convierte en un nodo que podemos seleccionar y manipular con JavaScript. Por ello, addEventListener y el DOM van de la mano para crear experiencias de usuario interactivas: uno gestiona la escucha de eventos y el otro nos permite modificar o consultar elementos en tiempo real.
A continuación, te proponemos 10 ejercicios para poner en práctica la gestión de eventos con JavaScript. Intenta resolverlos primero por tu cuenta: define la estructura HTML, añade el JavaScript y fíjate si logras que el evento reaccione según el enunciado. ¡Así desarrollarás mejor tu habilidad para resolver problemas y tu confianza en la programación!
10 ejercicios resueltos de eventos en JavaScript (addEventListener y DOM)
Ejercicio 1: Cambiar el color de un botón al hacer clic
Problema: Al hacer clic en un botón, cambiar el color de fondo de ese botón.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ejercicio 1 - Cambio de color</title>
</head>
<body>
<button id="btnColor">Haz clic en mí</button>
<script>
// Seleccionamos el botón
const btnColor = document.getElementById('btnColor');
// Agregamos el evento click
btnColor.addEventListener('click', () => {
// Cambiamos el color de fondo del botón
btnColor.style.backgroundColor = 'lightblue';
});
</script>
</body>
</html>Explicación:
- Obtenemos la referencia al botón mediante
getElementById. - Usamos
addEventListenerpara escuchar el eventoclick. - Dentro de la función flecha, modificamos la propiedad
style.backgroundColorpara cambiar el color.
Ejercicio 2: Mostrar un mensaje al pasar el ratón sobre un texto
Problema: Cuando el usuario coloque el cursor sobre un párrafo, mostrar en la consola un mensaje indicándolo.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ejercicio 2 - Mouseover</title>
</head>
<body>
<p id="parrafoHover">Pasa el ratón por aquí</p>
<script>
const parrafo = document.getElementById('parrafoHover');
parrafo.addEventListener('mouseover', () => {
console.log('¡El ratón está sobre el párrafo!');
});
</script>
</body>
</html>Explicación:
- Seleccionamos el elemento
pcon su ID. - Con
addEventListener('mouseover', ...)detectamos el momento en que el puntero entra en el área del párrafo. - Mostramos un mensaje en la consola usando
console.log.
Ejercicio 3: Contador de teclas presionadas
Problema: Mostrar cuántas teclas ha presionado el usuario en un campo de texto.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ejercicio 3 - Contador de teclas</title>
</head>
<body>
<input type="text" id="textoEntrada" placeholder="Escribe algo..." />
<p id="contadorTeclas">Teclas presionadas: 0</p>
<script>
const inputTexto = document.getElementById('textoEntrada');
const contadorTeclas = document.getElementById('contadorTeclas');
let contador = 0;
// Cada vez que se levanta una tecla
inputTexto.addEventListener('keyup', () => {
contador++;
contadorTeclas.textContent = `Teclas presionadas: ${contador}`;
});
</script>
</body>
</html>Explicación:
- Obtenemos el
inputy un párrafo para mostrar el conteo. - Declaramos una variable
contadorinicializada en 0. - Con
keyup, cada vez que el usuario presiona y suelta una tecla, incrementamos el contador y actualizamos el texto en el párrafo.
Ejercicio 4: Cambiar el contenido de un párrafo al presionar una tecla específica
Problema: Al presionar la tecla “Enter” en un campo de texto, reemplazar el contenido de un párrafo con el texto ingresado.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ejercicio 4 - Tecla específica</title>
</head>
<body>
<input type="text" id="nombre" placeholder="Escribe tu nombre y presiona Enter" />
<p id="parrafoSaludo">Aquí aparecerá tu nombre.</p>
<script>
const inputNombre = document.getElementById('nombre');
const parrafoSaludo = document.getElementById('parrafoSaludo');
inputNombre.addEventListener('keydown', (evento) => {
// Comprobamos si la tecla presionada es "Enter" (código 13 o key "Enter")
if (evento.key === 'Enter') {
parrafoSaludo.textContent = `¡Hola, ${inputNombre.value}!`;
}
});
</script>
</body>
</html>Explicación:
- Escuchamos el evento
keydownen el campo de texto. - Dentro de la función, verificamos si la tecla pulsada es la tecla Enter (
evento.key === 'Enter'). - Si coincide, cambiamos el contenido del párrafo con el valor ingresado por el usuario.
Ejercicio 5: Cambiar el texto de un botón al hacer doble clic
Problema: Cuando el usuario haga doble clic en un botón, el texto del botón se cambie por otro mensaje.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ejercicio 5 - Doble clic</title>
</head>
<body>
<button id="btnDoble">Doble clic en mí</button>
<script>
const btnDoble = document.getElementById('btnDoble');
btnDoble.addEventListener('dblclick', () => {
btnDoble.textContent = '¡Me hiciste doble clic!';
});
</script>
</body>
</html>Explicación:
- Seleccionamos el botón por su ID.
- Escuchamos el evento
dblclick, que se produce al realizar dos clics consecutivos. - Cuando ocurre, modificamos el texto interno del botón con
textContent.
Ejercicio 6: Mostrar una alerta antes de enviar un formulario
Problema: Antes de enviar un formulario, mostrar un mensaje de confirmación para asegurarnos de que el usuario desea continuar.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ejercicio 6 - Confirmar envío</title>
</head>
<body>
<form id="miFormulario">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" required>
<button type="submit">Enviar</button>
</form>
<script>
const formulario = document.getElementById('miFormulario');
formulario.addEventListener('submit', (evento) => {
const confirmar = confirm('¿Estás seguro de que deseas enviar el formulario?');
if (!confirmar) {
// Evitamos que se envíe el formulario si el usuario cancela
evento.preventDefault();
}
});
</script>
</body>
</html>Explicación:
- Escuchamos el evento
submitdel formulario. - Usamos
confirmpara mostrar un cuadro de confirmación. - Si el usuario presiona “Cancelar”, usamos
evento.preventDefault()para detener el envío.
Ejercicio 7: Habilitar o deshabilitar un botón según el contenido de un campo
Problema: Deshabilitar un botón si el campo de texto está vacío y habilitarlo cuando tenga contenido.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ejercicio 7 - Deshabilitar botón</title>
</head>
<body>
<input type="text" id="campoTexto" placeholder="Escribe algo..." />
<button id="btnEnviar" disabled>Enviar</button>
<script>
const campoTexto = document.getElementById('campoTexto');
const btnEnviar = document.getElementById('btnEnviar');
campoTexto.addEventListener('input', () => {
// Si el campo tiene contenido, habilitamos el botón
if (campoTexto.value.trim() !== '') {
btnEnviar.disabled = false;
} else {
// Si está vacío, lo deshabilitamos
btnEnviar.disabled = true;
}
});
</script>
</body>
</html>Explicación:
- El evento
inputse dispara cada vez que el contenido del campo cambia. - Verificamos si el valor no está vacío (usando
trim()para descartar espacios). - Habilitamos o deshabilitamos el botón según corresponda.
Ejercicio 8: Cambiar el color de fondo al hacer clic en diferentes botones (event delegation)
Problema: Crear varios botones, cada uno con un color. Al hacer clic en cualquiera, cambiar el color de fondo de la página al color asignado en el botón.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ejercicio 8 - Event Delegation</title>
</head>
<body>
<div id="contenedorBotones">
<button data-color="lightgreen">Verde claro</button>
<button data-color="lightpink">Rosa claro</button>
<button data-color="lightyellow">Amarillo claro</button>
</div>
<script>
const contenedor = document.getElementById('contenedorBotones');
// Al hacer clic dentro del contenedor, identificamos qué botón fue presionado
contenedor.addEventListener('click', (evento) => {
// Verificamos que el elemento sea un botón
if (evento.target.tagName === 'BUTTON') {
// Obtenemos el atributo data-color del botón
const color = evento.target.getAttribute('data-color');
// Cambiamos el color de fondo del body
document.body.style.backgroundColor = color;
}
});
</script>
</body>
</html>Explicación:
- En lugar de agregar un
addEventListenera cada botón, lo hacemos al contenedor (event delegation). - Verificamos si el elemento clicado es un botón, obtenemos el valor de
data-colory modificamos elbackgroundColordelbody.
Ejercicio 9: Mostrar un mensaje mientras se escribe (evento input)
Problema: Mientras el usuario escribe en un campo, mostrar en tiempo real lo que va tecleando en un párrafo.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ejercicio 9 - Mostrar entrada</title>
</head>
<body>
<input type="text" id="campoEntrada" placeholder="Escribe aquí..." />
<p id="textoDinamico">Texto: </p>
<script>
const campoEntrada = document.getElementById('campoEntrada');
const textoDinamico = document.getElementById('textoDinamico');
campoEntrada.addEventListener('input', () => {
textoDinamico.textContent = `Texto: ${campoEntrada.value}`;
});
</script>
</body>
</html>Explicación:
- El evento
inputse dispara cada vez que el contenido cambia mientras se escribe. - Asignamos el contenido del campo de texto al párrafo para que muestre la información de forma dinámica.
Ejercicio 10: Resaltar un campo cuando está en foco y quitar el estilo al perderlo
Problema: Al hacer clic dentro de un campo de texto, resaltarlo con un borde de color. Al salir del campo, eliminar el borde.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ejercicio 10 - Enfoque y desenfoque</title>
</head>
<body>
<input type="text" id="campoFoco" placeholder="Haz clic aquí..." />
<script>
const campoFoco = document.getElementById('campoFoco');
// Evento focus: cuando hacemos clic dentro del campo
campoFoco.addEventListener('focus', () => {
campoFoco.style.border = '2px solid blue';
});
// Evento blur: cuando el campo pierde el foco (hacemos clic fuera)
campoFoco.addEventListener('blur', () => {
campoFoco.style.border = '';
});
</script>
</body>
</html>Explicación:
- Con
focus, aplicamos un borde al campo al hacer clic en él. - Con
blur, eliminamos el borde cuando el campo pierde el foco.
Preguntas frecuentes sobre eventos en JS
¿Por qué usar addEventListener en lugar de atributos HTML como onclick?
Usar addEventListener permite separar la lógica JavaScript de la estructura HTML y manejar múltiples eventos del mismo tipo sobre un elemento sin sobrescribir los anteriores.
¿Cómo se obtienen los datos del evento, como las coordenadas del ratón o la tecla presionada?
El objeto evento que se pasa a la función manejadora contiene propiedades que describen todo lo referente al suceso (por ejemplo, evento.clientX, evento.clientY para coordenadas del ratón, evento.key para la tecla, etc.).
¿Cómo puedo evitar que una acción por defecto ocurra en un evento, por ejemplo, la recarga de página al enviar un formulario?
Para ello, utilizamos evento.preventDefault(). De este modo, cancelamos la acción predeterminada asociada a un evento (como el envío de un formulario).
¡Felicidades! Ahora dominas los fundamentos de la gestión de eventos en JavaScript y comprendes cómo utilizarlos para interactuar con el DOM. Con estas bases, tienes el poder de crear experiencias dinámicas y atractivas para los usuarios.
Cada ejercicio te ha mostrado un escenario distinto, reforzando que la práctica es la clave para afianzar estos conocimientos. ¡Sigue explorando más casos y verás cómo tu habilidad en JavaScript crecerá día a día!
¿Te gustó este artículo y quieres aprender aún más sobre JavaScript y desarrollo web? Visita nuestro blog para descubrir más tutoriales, recursos y consejos que llevarán tus habilidades al siguiente nivel. ¡Te esperamos con más contenido para seguir creciendo en el mundo de la programación!
