0Pricing
JavaScript Academy · Lección

Eventos de teclado y ratón

Gestione clics, pulsaciones de teclas y eventos de puntero.

Eventos de teclado y ratón es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

Familias de eventos de entrada

Los eventos del ratón y del teclado permiten crear interacciones enriquecidas. Cada familia tiene tipos de eventos y propiedades especializados.

El evento click

click se dispara al presionar y soltar el botón principal. También se dispara al activar botones y enlaces con el teclado, lo que favorece la accesibilidad.

btn.addEventListener("click", () => {
  console.log("activated");
});

dblclick y contextmenu

dblclick se dispara al hacer doble clic y contextmenu al hacer clic con el botón derecho (a menudo se cancela para mostrar un menú personalizado).

el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());

mousedown, mouseup, mousemove

Estos eventos ofrecen un control detallado: presionar, soltar y mover. Son los componentes básicos de las interacciones de arrastre.

box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));

mouseenter frente a mouseover

mouseenter no se propaga y no tiene en cuenta los límites de los elementos secundarios, mientras que mouseover se propaga y se dispara al desplazarse sobre los descendientes. Normalmente, mouseenter es lo que necesita para las interacciones al pasar el ratón.

el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));

Qué botón del ratón

La propiedad button indica qué botón provocó el evento: 0, el izquierdo; 1, el central; y 2, el derecho.

el.addEventListener("mousedown", (e) => {
  if (e.button === 2) console.log("right button");
});

keydown y keyup

keydown se dispara cuando se presiona una tecla (y se repite mientras se mantiene presionada); keyup se dispara al soltarla. keypress está obsoleto.

input.addEventListener("keydown", (e) => {
  console.log("down: " + e.key);
});

event.key

e.key es el valor lógico de la tecla: un carácter como "a" o un nombre como "Enter", "Escape" o "ArrowUp".

input.addEventListener("keydown", (e) => {
  if (e.key === "Escape") console.log("cancel");
});

event.code

e.code es la ubicación física de la tecla (como "KeyA" o "Space"), independientemente de la distribución del teclado. Úselo para los controles de juegos.

window.addEventListener("keydown", (e) => {
  if (e.code === "Space") console.log("jump");
});

Atajos de teclado

Combine los indicadores de modificadores con key para detectar atajos y llame a preventDefault para anular el comportamiento predeterminado del navegador.

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    console.log("save");
  }
});

repeat para teclas mantenidas

e.repeat es true cuando keydown se dispara porque la tecla se mantiene presionada, lo que permite ignorar las repeticiones automáticas.

window.addEventListener("keydown", (e) => {
  if (e.repeat) return;
  console.log("first press of " + e.key);
});

Comprobación rápida

Elija la propiedad independiente de la distribución del teclado.

Resumen

Los eventos del ratón incluyen click, dblclick, mousedown/mouseup/mousemove y los eventos adecuados para pasar el ratón, mouseenter/mouseleave; button identifica qué botón se utilizó. Los eventos del teclado usan keydown/keyup, con e.key para el carácter o nombre, e.code para la tecla física y e.repeat para las teclas mantenidas.

Preguntas frecuentes

¿La lección «Eventos de teclado y ratón» es gratis?

Sí — el texto completo de «Eventos de teclado y ratón» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Eventos de teclado y ratón»?

Gestione clics, pulsaciones de teclas y eventos de puntero. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Eventos de teclado y ratón»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Fundamentos de addEventListener
  2. El objeto de evento
  3. preventDefault y stopPropagation
  4. Eventos de teclado y ratón
← Volver a JavaScript Academy