Eventos del DOM: click, hover y keydown en JavaScript

Domina los eventos en JavaScript y la manipulación del DOM con una interfaz mínima y eficaz. Verás cómo modelar un estado, renderizar texto con textContent y responder a click, hover y keydown usando addEventListener, funciones anónimas y el operador ternario. Además, se destacan buenas prácticas de nomenclatura en inglés y retornos tempranos para lógica clara.

¿Cómo gestionar estado y mensajes en JavaScript?

Modela un estado centralizado para sincronizar la UI con la interacción. Se usa un objeto state con dos claves: likes inicializado en 0 y isHovering en false. La función getStatusMessage devuelve el mensaje correcto según el contador usando comparaciones estrictas y retornos tempranos.

// Estado de la aplicación
const state = {
  likes: 0,
  isHovering: false,
};

// Mensaje dinámico según likes
function getStatusMessage() {
  if (state.likes === 0) return 'Aún no hay likes. Haz clic en me gusta';
  if (state.likes === 1) return 'Tienes un like. Buen inicio';
  return `Tienes ${state.likes} likes. Sigue así`;
}

¿Qué patrones se usan para mensajes dinámicos?

• Retornos tempranos para simplificar if anidados.
• Comparación estricta (===) para evitar coerción de tipos.
• Template literals para componer strings con variables.
• Comillas simples cuando no interpolas variables. Backticks cuando sí.

¿Cómo renderizar y manipular el DOM con eventos?

Centraliza el pintado de la UI en una función render. Selecciona nodos con document.querySelector (status, button like, button reset, hover zone, hover pill, hover title, hover text). Actualiza texto, deshabilita botones y alterna clases según el estado.

function render() {
  // Selección de nodos (usa los selectores reales de tu HTML)
  const status = document.querySelector('/* selector de status */');
  const btnLike = document.querySelector('/* selector de botón like */');
  const btnReset = document.querySelector('/* selector de botón reset */');
  const hoverZone = document.querySelector('/* selector de hover zone */');
  const hoverPill = document.querySelector('/* selector de hover pill */');
  const hoverTitle = document.querySelector('/* selector de hover title */');
  const hoverText = document.querySelector('/* selector de hover text */');

  // Mensaje principal
  status.textContent = getStatusMessage();

  // Estado del botón reset
  btnReset.disabled = state.likes === 0;
  btnReset.style.opacity = state.likes === 0 ? 0.55 : 1;

  // Zona de hover: clase y textos
  hoverZone.classList.toggle('isHover', state.isHovering);
  hoverPill.textContent = state.isHovering ? 'mouse dentro' : 'mouse fuera';
  hoverTitle.textContent = state.isHovering ? 'hover detectado' : 'pasa el mouse por aquí';
  hoverText.textContent = state.isHovering
    ? 'Este cambio se disparó por el mouse enter del DOM'
    : 'Cuando entras, sales, cambias una clase y el texto';
}

¿Cómo aplicar el operador ternario en el DOM?

• Úsalo para asignar valores en una sola línea.
• Ejemplo: opacidad según likes: btnReset.style.opacity = state.likes === 0 ? 0.55 : 1.
• Mejora la legibilidad al evitar if/else verbosos.

¿Cómo configurar eventos de click y hover?

Vincula eventos con addEventListener usando funciones anónimas. Incrementa, reinicia y re-renderiza. Para hover, usa mouseenter y mouseleave para activar el booleano isHovering.

function setupEvents() {
  const btnLike = document.querySelector('/* selector de botón like */');
  const btnReset = document.querySelector('/* selector de botón reset */');
  const hoverZone = document.querySelector('/* selector de hover zone */');

  // Click en like
  btnLike.addEventListener('click', function () {
    state.likes += 1;
    render();
  });

  // Click en reset
  btnReset.addEventListener('click', function () {
    state.likes = 0;
    render();
  });

  // Hover dentro
  hoverZone.addEventListener('mouseenter', function () {
    state.isHovering = true;
    render();
  });

  // Hover fuera
  hoverZone.addEventListener('mouseleave', function () {
    state.isHovering = false;
    render();
  });
}

¿Cómo escuchar eventos del teclado y atajos?

Para atajos globales, escucha en document el evento keydown. Con event.key.toLowerCase() filtra la tecla deseada. Si no coincide, retorna y no haces nada. Si coincide con “l”, incrementa likes y vuelve a renderizar.

function setupKeyboardLike() {
  document.addEventListener('keydown', function (event) {
    if (event.key.toLowerCase() !== 'l') return; // retorno temprano seguro
    state.likes += 1;
    render();
  });
}

// Inicialización
setupEvents();
render();
setupKeyboardLike();

• Usa document para cubrir toda la página.
• Tecla filtrada con toLowerCase() para evitar problemas de mayúsculas.
• Funciones anónimas: se ejecutan al dispararse el evento, sin nombre propio.
• Recuerda: los errores en consola ayudan a detectar detalles como comas o paréntesis faltantes.

¿Tienes una mejora o un reto extra que sumar, por ejemplo otras teclas o combinaciones? Compártelo en los comentarios y cuéntanos cómo lo resolviste con addEventListener y un buen state centralizado.