Detectar evento de entrada de teclado en JavaScript

Un detector de eventos es simplemente una función de JavaScript que se activa cuando ocurre un evento de entrada de usuario en particular. Un ejemplo simple de tal evento es un clic del mouse o presionar un botón del teclado. Las funciones de escucha de eventos deben registrarse primero con un objetivo. Después de eso, cada vez que ocurre un evento en particular que nos interesa, se activa nuestra función de escucha. Se pueden adjuntar varios oyentes al mismo destino que puede escuchar el mismo tipo de eventos o diferentes.

La publicación de hoy muestra cómo reconocer eventos de entrada de teclado en JavaScript.

Detectar evento de entrada de teclado usando addEventListener() en JavaScript

Este es un método integrado proporcionado por JavaScript que registra un detector de eventos. Es un método de la interfaz EventTarget. Siempre que se detecta el evento especificado en el objetivo, se llama a nuestra función configurada.

Sintaxis

target.addEventListener($type, $listener);
target.addEventListener($type, $listener, $options);
target.addEventListener($type, $listener, $useCapture);

Parámetro

• $type: Es un parámetro obligatorio que solo acepta una cadena que especifica el tipo de evento a escuchar. Es sensible a mayúsculas y minúsculas y admite varios eventos como mouse, keyboard, input, database, etc.
• $listener: Es un parámetro obligatorio, un objeto que recibirá una notificación cuando ocurra un evento del tipo especificado. Este objeto debe implementar la interfaz EventListener o una función de JavaScript.
• $options: Es un parámetro opcional que especifica las características del oyente de eventos. Algunas de las características son capture, once, passive y signal.
• $useCapture: es un parámetro opcional que acepta valores booleanos que indican si los eventos de este tipo se envían al oyente registrado antes de enviarse a un EventTarget debajo del árbol DOM.

Hay tres tipos de eventos de teclado que puede escuchar keydown, keypress y keyup. El navegador dispara un evento keydown, cuando se presiona una tecla en el teclado, y cuando se suelta, se dispara un evento keyup. Cada evento de teclado tiene su propio keyCode o key. Por ejemplo, el botón Enter tiene la tecla Enter y el keyCode 13.

Código de ejemplo:

<input type="text" id="textId">

document.getElementById('textId').addEventListener('keydown', myFunction);

function myFunction() {
  switch (event.key) {
    case 'ArrowDown':
      console.log('ArrowDown');
      break;
    case 'ArrowUp':
      console.log('ArrowUp');
      break;
    case 'ArrowLeft':
      console.log('ArrowLeft');
      break;
    case 'ArrowRight':
      console.log('ArrowRight');
      break;
    default:
      console.log(event.key, event.keyCode);
      return;
  }

  event.preventDefault();
}

Producción: