9. Eventos: Haciendo la Web Viva 🖱️
¿Qué es un Evento?
Es cualquier acción que ocurre en tu página: un clic, mover el ratón, escribir en un campo de texto o cargar la página completa. JavaScript está escuchando estos eventos para responder.
interactividad.js
JAVASCRIPT
1 // 1. Seleccionar el botón
2 const btn = document.querySelector("#btn-magico");
3
4 // 2. Escuchar el evento
5 btn.addEventListener("click", () => {
6 console.log("¡Me has hecho clic!");
7 alert("¡JavaScript en acción!");
8 });
El objeto Event (e)
Cuando ocurre un evento, este te envía una caja con información extra de lo que pasó: qué elemento se clicó, dónde estaba el ratón, qué tecla se pulsó, etc.
teclado.js
JAVASCRIPT
1 const entrada = document.querySelector("#mi-input");
2
3 entrada.addEventListener("keydown", (e) => {
4 console.log("Pulsaste la tecla: " + e.key);
5 });
💻 Misión: Cambia el texto al hacer clic
Crea un script que cuando hagas clic en un elemento con ID "mi-titulo", cambie su contenido a "¡Gracias por el clic!".
👁️ Ver solución sugerida
JS
JAVASCRIPT
1 const titulo = document.getElementById("mi-titulo");
2
3 titulo.addEventListener("click", () => {
4 titulo.textContent = "¡Gracias por el clic!";
5 });
