Capturar eventos en JavaScript te permite reaccionar a clics, movimientos del mouse y pulsaciones del teclado para construir interfaces dinámicas. Aprenderás a manipular el DOM con addEventListener, manejar estados con objetos y aplicar operadores ternarios para escribir lógica más limpia. Es ideal si ya conoces lo básico del DOM y quieres dar el siguiente paso hacia interactividad real.
¿Qué son los eventos en JavaScript y para qué sirven?
Los eventos son acciones que un usuario ejecuta sobre una página web: dar clic, pasar el mouse, presionar teclas o desplazarse. JavaScript puede escuchar esos eventos y desencadenar respuestas, lo que convierte a una página estática en una experiencia interactiva [0:15].
En la demo que construimos hay tres interacciones clave: un botón de me gusta que incrementa un contador, una zona que detecta cuando el mouse entra o sale, y un atajo de teclado que también suma likes. Cada una representa un tipo distinto de evento del DOM.
¿Qué hace addEventListener en JavaScript? Es el método que conecta un nodo del DOM con un evento específico (como click o keydown) y ejecuta una función cuando ese evento ocurre.
¿Cómo manejar el estado de una aplicación con un objeto?
Antes de tocar el DOM, necesitas un lugar donde guardar la información que cambia. Para eso creamos una constante llamada state que agrupa los datos relevantes en un solo objeto [3:10].
javascript
const state = {
likes: 0,
isHovering: false
};
Este patrón centraliza el estado y facilita que cada función lea o modifique los mismos valores. La propiedad likes arranca en cero y isHovering en false porque al cargar la página el mouse aún no ha entrado a ninguna zona.
Una función auxiliar llamada getStatusMessage devuelve un texto distinto según el valor de state.likes. Aquí entran los template literals, que permiten interpolar variables dentro de un string usando comillas invertidas y ${}:
javascript
return Tienes ${state.likes} likes. Sigue así;
Las comillas simples sirven cuando el texto es fijo; los template literals brillan cuando necesitas componer mensajes dinámicos.
¿Cómo se usa el operador ternario para simplificar condiciones?
En lugar de escribir un if/else completo para asignar un valor, puedes usar el operador ternario. Su sintaxis es: condición ? valorSiVerdadero : valorSiFalso [7:45].
javascript
buttonReset.disabled = state.likes === 0;
buttonReset.style.opacity = state.likes === 0 ? 0.55 : 1;
En la primera línea, el botón de reset se deshabilita cuando no hay likes. En la segunda, el ternario asigna opacidad 0.55 si no hay likes y 1 si los hay. Es la misma lógica que un if/else, pero en una sola línea legible.
¿Cuándo usar un ternario y cuándo un if tradicional? Usa ternario para asignaciones simples o valores condicionales. Reserva el if clásico cuando necesites ejecutar varias instrucciones dentro de cada rama.
Este mismo patrón se aplica a classList.toggle('isHover', state.isHovering), que añade o quita una clase CSS dependiendo del booleano sin necesidad de escribir un condicional explícito.
¿Cómo escuchar clics y movimientos del mouse con addEventListener?
Para conectar la lógica con la interfaz, agrupamos todos los listeners dentro de una función llamada setupEvents. Cada nodo se obtiene con document.querySelector y luego se le asigna su comportamiento [11:20].
javascript
buttonLike.addEventListener('click', () => {
state.likes += 1;
render();
});
La función que pasas como segundo argumento se llama función anónima porque no tiene nombre propio. Se ejecuta solo cuando ocurre el evento. Podrías declararla aparte y pasar su nombre, pero en proyectos reales la verás escrita así, inline.
Para la zona de hover usamos dos eventos complementarios:
mouseenter: se dispara cuando el cursor entra al elemento.mouseleave: se dispara cuando el cursor sale.- Ambos actualizan
state.isHovering y llaman a render() para refrescar la UI.
javascript
hoverZone.addEventListener('mouseenter', () => {
state.isHovering = true;
render();
});
A diferencia del :hover de CSS, aquí puedes cambiar texto, clases o disparar cualquier lógica de JavaScript, no solo estilos.
¿Cómo detectar pulsaciones del teclado con keydown?
Los atajos de teclado son una forma poderosa de mejorar la experiencia. Para escucharlos, conectas el listener al document completo en vez de a un nodo específico [18:30].
javascript
function setupKeyboardLike() {
document.addEventListener('keydown', (event) => {
if (event.key.toLowerCase() !== 'l') return;
state.likes += 1;
render();
});
}
El objeto event que recibe la función contiene información sobre la tecla presionada. Con event.key.toLowerCase() normalizamos a minúsculas para que L y l se traten igual. El return vacío sirve como salida temprana: si la tecla no es la esperada, la función termina sin hacer nada.
¿Qué es un return vacío en una función de evento? Es una salida temprana que detiene la ejecución cuando no se cumple la condición, evitando ejecutar el resto del código sin romper la aplicación.
Al final, inicializa todo llamando setupEvents(), setupKeyboardLike() y un primer render() para que la interfaz arranque con el mensaje correcto. Prueba presionar la tecla L y verás cómo el contador sube igual que con el clic.
¿Qué otros atajos de teclado le agregarías a esta demo? Déjalo en los comentarios y comparte tu solución a los retos.
