Detectar pulsaciones de teclas de flecha en JavaScript

1. ¿Qué son los eventos?
2. ¿Cuáles son los EventListeners más comunes en JavaScript?
3. Oyente de eventos Keydown en JavaScript

Este tutorial explica cómo puede crear accesos directos y configurar teclas de acceso rápido mediante el uso de ciertas funciones integradas que escuchan la entrada del usuario en JavaScript. Este artículo también incluirá una descripción detallada de Eventos y EventListeners en JavaScript.

¿Qué son los eventos?

En esta perspectiva de codificación, la actividad física que realizamos provoca un evento. Estos eventos son la fuerza impulsora de la ejecución del programa; es útil cuando se trabaja con la interfaz gráfica de usuario (GUI).

Podemos hacer estos accesos directos y teclas de acceso rápido mediante el uso de un procedimiento de escucha de eventos que escucha un evento en particular y pasa esta información al controlador para manejar el evento.

En palabras simples, toma una entrada de la tecla (ratón o teclado) presionada, también podemos usar un event handler directamente que procesa estos eventos. Demostraremos ambos paradigmas en profundidad.

¿Cuáles son los EventListeners más comunes en JavaScript?

Hay muchos controladores de eventos en JS, estos dos son los más comunes y sus funciones son:

• keydown: registra cuando presionas una tecla y sigue registrando continuamente si la mantienes presionada
• keyup: registra cuando sueltas la tecla

Oyente de eventos Keydown en JavaScript

El controlador de eventos .onkeydown le dice al compilador que ejecute una determinada function() tan pronto como se presione la tecla deseada; colocando una alert("message"), podemos mostrar un cuadro de alerta que contiene un mensaje específico.

En el siguiente código, usamos dos propiedades de evento, .key, que devolverá la etiqueta de la tecla presionada, y .keyCode que devolverá el código de la tecla en particular. Estos códigos clave son como ASCII, ya que cada clave se asigna a un valor alfanumérico particular.

En nuestro ejemplo, ingresamos k como el parámetro de la función.

document.onkeydown = function(e) {
  alert(e.key + e.keyCode);  // shows k75
};

Tan pronto como se presiona una tecla en particular, recibimos una alerta que muestra la tecla presionada concatenada con su código de tecla. Las etiquetas de teclas y los códigos de teclas facilitan la manipulación de la lógica del código y se utilizan ampliamente en operaciones basadas en eventos.

Veamos un ejemplo que muestra cómo podemos usar estos parámetros a nuestro favor.

document.onkeydown = function(e) {
  switch (e.keyCode) {
    case 37:
      alert('left');  // show the message saying left"
      break;
    case 38:
      alert('up');  // show the message saying up"
      break;
    case 39:
      alert('right');  // show the message saying right"
      break;
    case 40:
      alert('down');  // show the message saying down"
      break;
  }
};

Aquí, usamos un caso de interruptor simple que toma el código de la tecla presionada, verifica a qué caso pertenece y lo evalúa para mostrar un mensaje. Digamos que presionamos la tecla de flecha izquierda; luego mostrará la alerta izquierda, y así sucesivamente.

También podemos definir el detector de eventos de esta manera:

document.addEventListener('keydown', function(event) {});

Aquí echamos un vistazo a otro paradigma y en qué se diferencia de nuestro enfoque anterior:

document.addEventListener('keydown', function(event) {
  if (event.key == 'ArrowLeft') {
    alert('Left key');  // show the message saying Left key"
  } else if (event.key == 'ArrowUp') {
    alert('Up key');  // show the message saying Up key"
  } else if (event.key == 'ArrowRight') {
    alert('Right key');  // show the message saying Right key"
  } else if (event.key == 'ArrowDown') {
    alert('Down key');  // show the message saying Down key"
  }
});

Parece que este código da el mismo resultado que nuestro código anterior. Aún así, hay una trampa, aquí en lugar de usar códigos clave explícitamente para jugar con nuestra lógica, usamos etiquetas clave como Flecha abajo y Flecha arriba que directamente y las comparan para mostrar el mensaje deseado.

Digamos que presionamos la flecha hacia arriba, luego nuestros bloques de código if verificarán si la etiqueta de tecla devuelta por la función coincide con las etiquetas de tecla dadas. Si lo hace, entonces ese bloque se ejecuta, mostrando un mensaje.

Ahora, no tenemos que recordar los códigos de tecla de cada tecla cuando podemos recordar las etiquetas de teclas mnemotécnicas que son mucho más fáciles de recordar. Esto es extremadamente útil cuando no conocemos los códigos clave y nos metemos en la lógica.