[자바스크립트] 키보드 이벤트 (keydown/keyup)

자바스크립트를 이용하여 웹페이지 상에서 사용자의 키보드 입력을 감지하여 처리하는 방법에 대해서 알아보겠습니다.

키보드 이벤트 타입

키보드 이벤트(Keyboard Event)는 사용자가 키를 누르거나 키를 놓을 때 발생합니다. 키를 누를 때는 keydown 타입의 이벤트가 발생하고, 키를 놓을 때는 keyup 타입의 이벤트가 발생합니다. (예전에는 keypress라는 이벤트 타입도 사용되었으나, 현재는 deprecated되어 권장되지 않으므로 다루지 않겠습니다.)

키보드 이벤트는 DOM 상에서 창(window)이나 문서(document), 또는 특정 요소(element)에서 발생할 수 있습니다. 예를 들어, window에서 발생하는 keydown 이벤트를 처리하려면 다음과 같이 이벤트 처리를 위한 콜백(callback) 함수를 설정해주면 됩니다.

window.onkeydown = (e) => console.log(e);

addEventListener 함수를 이용해도 같은 효과를 낼 수 있습니다.

window.addEventListener("keydown", (e) => console.log(e));

키보드 이벤트 객체

키보드 이벤트 객체에는 눌리거나 놓아진 키에 대한 다양한 메타정보가 담겨 있습니다. 예를 들어, key 속성에는 키 값이, code 속성에는 코드 값이, shiftKey 속성에는 쉬프트키가 함께 눌렸는지 여부가 저장됩니다.

키보드의 1 키를 눌러보면 이벤트 핸들러 함수에 다음과 같은 키보드 이벤트 객체가 넘어오는 것을 볼 수 있습니다.

{
  key: "1",
  code: "Digit1",
  shiftKey: false,
  // 생략
}

쉬프트키와 함께 키보드의 a 키를 눌러보면 다음과 같은 키보드 이벤트 객체가 이벤트 핸들러 함수에 넘어옵니다.

{
  key: "A",
  code: "KeyA",
  shiftKey: true,
  // 생략
}

이렇게 이벤트 핸들러 함수에 넘어온 키의 메타정보를 이용하여 다양한 처리를 할 수 있는데요. 대표적으로 웹 애플케이션에서 단축키를 제공하거나, 웹에서 돌아가는 게임에서 키보드 조작을 지원하기 위해서 활용할 수 있습니다.

키보드 이벤트 처리

지금부터 키보드 이벤트를 처리하는 간단한 예제 코드를 작성해보겠습니다.

먼저 다음과 같이 숫자 박스를 나타내는 3개의 div 엘리먼트를 마크업하기 위해 HTML을 작성합니다.

<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>

그 다음, 숫자 박스를 스타일하기 위한 CSS를 작성합니다. .pressed 클래스에 대한 스타일은 키보드 이벤트 발생했을 때 시각적인 효과를 주기 위함입니다.

div {
  font-size: 2rem;
  text-align: center;
  color: white;
  background: black;
  border-radius: 1rem;
  padding: 2rem;
  transition: all 0.5s ease;
}

.pressed {
  background: tomato;
  transform: scale(1.2);
}

마지막으로 keydown과 keyup 이벤트에 대한 핸들러를 추가하기 위한 자바스크립트 코드를 작성합니다. keydown 이벤트가 발생하면 pressed 클래스를 숫자 박스에 추가해주고, keyup 이벤트가 발생하면 pressed 클래스를 제거해줍니다.

window.addEventListener("keydown", (e) => {
  const key = document.getElementById(e.key);
  if (key) key.classList.add("pressed");
});

window.addEventListener("keyup", (e) => {
  const key = document.getElementById(e.key);
  if (key) key.classList.remove("pressed");
});

이제 키보드에서 1 또는 2, 3 키를 눌러보면 해당하는 숫자 박스가 커지면서 색깔이 바뀌는 것을 보실 수 있습니다.

전체 코드

완성된 웹페이지와 전체 코드는 아래에서 확인해보실 수 있습니다. 우측에 웹페이지 영역을 한 번 클릭하셔서 포커스를 이동한 후에 테스트해보시기 바랍니다.

마치면서

이상으로 자바스크립트로 키보드 이벤트를 처리하는 방법에 대해서 간단히 살펴보았습니다. 키보드 이벤트에 대한 좀 더 자세한 내용은 관련 MDN 문서를 참고바라겠습니다.