Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Trabajando con Eventos de Teclado y Ratón | Gestión de Eventos e Interacciones de Usuario en JavaScript
Maestría Avanzada en JavaScript

bookTrabajando con Eventos de Teclado y Ratón

Los eventos de teclado y ratón permiten a los desarrolladores capturar y responder a las interacciones del usuario. Al gestionar eficazmente las entradas del usuario, se puede proporcionar retroalimentación, ejecutar acciones específicas o mejorar la experiencia general del usuario.

Eventos de teclado

Los eventos de teclado se activan cuando los usuarios interactúan con el teclado. Existen dos eventos principales de teclado:

En un editor de texto o cualquier formulario donde los usuarios escriben, es común capturar ciertas combinaciones de teclas (por ejemplo, Ctrl + S para guardar, o Ctrl + Z para deshacer). A continuación, se presenta un ejemplo donde se registran teclas específicas para simular la detección de atajos en un formulario.

index.html

index.html

index.css

index.css

index.js

index.js

copy

En este ejemplo, los usuarios escriben en un campo de entrada y el script captura atajos de teclado comunes como Ctrl + S para guardar o Ctrl + Z para deshacer una acción.

Manejo de eventos de ratón

Los eventos de ratón se activan cuando los usuarios interactúan con su ratón o un touchpad. Los eventos de ratón más utilizados son:

Creación de un ejemplo donde se muestra un tooltip al pasar el mouse sobre un botón.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Proporcionar información contextual rápida sin sobrecargar la interfaz es un caso de uso común, mejorando la usabilidad y guiando a los usuarios a través de interfaces complejas.

Ejemplo práctico: Doble clic para editar con acción de guardar

En muchas aplicaciones web modernas, los usuarios pueden hacer doble clic para editar un elemento (como renombrar un archivo o actualizar una tarea) y guardar sus cambios.

index.html

index.html

index.css

index.css

index.js

index.js

copy

En este ejemplo, inicialmente, un párrafo muestra la tarea, que se vuelve editable al hacer doble clic, mostrando un campo de entrada y un botón "Guardar". El usuario puede modificar la tarea y hacer clic en "Guardar" para aplicar los cambios; esta configuración evita modificaciones accidentales por clics simples. Después de guardar, aparece un mensaje de estado para confirmar la actualización o mostrar un error si el campo está vacío.

1. ¿Qué hace el evento keydown?

2. ¿Qué evento del ratón se activa cuando el puntero entra en el área de un elemento?

question mark

¿Qué hace el evento keydown?

Select the correct answer

question mark

¿Qué evento del ratón se activa cuando el puntero entra en el área de un elemento?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 6

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.22

bookTrabajando con Eventos de Teclado y Ratón

Desliza para mostrar el menú

Los eventos de teclado y ratón permiten a los desarrolladores capturar y responder a las interacciones del usuario. Al gestionar eficazmente las entradas del usuario, se puede proporcionar retroalimentación, ejecutar acciones específicas o mejorar la experiencia general del usuario.

Eventos de teclado

Los eventos de teclado se activan cuando los usuarios interactúan con el teclado. Existen dos eventos principales de teclado:

En un editor de texto o cualquier formulario donde los usuarios escriben, es común capturar ciertas combinaciones de teclas (por ejemplo, Ctrl + S para guardar, o Ctrl + Z para deshacer). A continuación, se presenta un ejemplo donde se registran teclas específicas para simular la detección de atajos en un formulario.

index.html

index.html

index.css

index.css

index.js

index.js

copy

En este ejemplo, los usuarios escriben en un campo de entrada y el script captura atajos de teclado comunes como Ctrl + S para guardar o Ctrl + Z para deshacer una acción.

Manejo de eventos de ratón

Los eventos de ratón se activan cuando los usuarios interactúan con su ratón o un touchpad. Los eventos de ratón más utilizados son:

Creación de un ejemplo donde se muestra un tooltip al pasar el mouse sobre un botón.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Proporcionar información contextual rápida sin sobrecargar la interfaz es un caso de uso común, mejorando la usabilidad y guiando a los usuarios a través de interfaces complejas.

Ejemplo práctico: Doble clic para editar con acción de guardar

En muchas aplicaciones web modernas, los usuarios pueden hacer doble clic para editar un elemento (como renombrar un archivo o actualizar una tarea) y guardar sus cambios.

index.html

index.html

index.css

index.css

index.js

index.js

copy

En este ejemplo, inicialmente, un párrafo muestra la tarea, que se vuelve editable al hacer doble clic, mostrando un campo de entrada y un botón "Guardar". El usuario puede modificar la tarea y hacer clic en "Guardar" para aplicar los cambios; esta configuración evita modificaciones accidentales por clics simples. Después de guardar, aparece un mensaje de estado para confirmar la actualización o mostrar un error si el campo está vacío.

1. ¿Qué hace el evento keydown?

2. ¿Qué evento del ratón se activa cuando el puntero entra en el área de un elemento?

question mark

¿Qué hace el evento keydown?

Select the correct answer

question mark

¿Qué evento del ratón se activa cuando el puntero entra en el área de un elemento?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 6
some-alt