JavaScript에서 키보드 입력 이벤트 감지

이벤트 리스너는 단순히 특정 사용자 입력 이벤트가 발생할 때 트리거되는 JavaScript 함수입니다. 이러한 이벤트의 간단한 예는 마우스 클릭 또는 키보드 버튼 누름입니다. 이벤트 리스너 기능은 먼저 대상에 등록해야 합니다. 그 후, 관심 있는 특정 이벤트가 발생할 때마다 리스너 기능이 트리거됩니다. 동일하거나 다른 이벤트 유형을 수신할 수 있는 동일한 대상에 여러 리스너를 연결할 수 있습니다.

오늘의 포스트는 JavaScript에서 키보드 입력 이벤트를 인식하는 방법을 보여줍니다.

JavaScript에서 addEventListener()를 사용하여 키보드 입력 이벤트 감지

이벤트 리스너를 등록하는 JavaScript에서 제공하는 내장 메소드입니다. EventTarget 인터페이스의 메소드입니다. 지정된 이벤트가 대상에서 감지될 때마다 구성된 함수가 호출됩니다.

통사론

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

매개변수

• $type: 청취할 이벤트의 유형을 지정하는 문자열만 허용하는 필수 매개변수입니다. 대소문자를 구분하며 mouse, keyboard, input, database 등과 같은 다양한 이벤트를 지원합니다.
• $listener: 지정된 유형의 이벤트가 발생하면 알림을 받을 객체인 필수 매개변수입니다. 이 개체는 EventListener 인터페이스 또는 JavaScript 기능을 구현해야 합니다.
• $options: 이벤트 리스너의 특성을 지정하는 선택적 매개변수입니다. 일부 특성은 capture, once, passive 및 signal입니다.
• $useCapture: 이 유형의 이벤트가 DOM 트리 아래의 EventTarget으로 전송되기 전에 등록된 리스너로 전송되는지 여부를 나타내는 Boolean 값을 허용하는 선택적 매개변수입니다.

keydown, keypress 및 keyup을 들을 수 있는 세 가지 유형의 키보드 이벤트가 있습니다. 브라우저는 키보드의 키를 눌렀을 때 keydown 이벤트를 발생시키고, 키를 놓으면 keyup 이벤트를 발생시킵니다. 각 키보드 이벤트에는 고유한 keyCode 또는 key가 있습니다. 예를 들어 Enter 버튼에는 Enter 키와 13 키 코드가 있습니다.

예제 코드:

<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();
}

출력: