JavaScript에서 키보드 입력 이벤트를 감지하는 방법

웹 페이지의 키보드 입력은 키보드 이벤트로 처리됩니다. addEventListener()로 리스너를 등록한 다음, 해당 콜백에 전달된 이벤트 객체를 읽으세요. 키를 누를 때 반응하려면 keydown을 사용하고, 키를 놓은 후 반응하려면 keyup을 사용하세요.

addEventListener()로 키보드 이벤트 리스닝

입력을 받아야 하는 요소에 리스너를 연결하세요. 페이지의 어느 곳에 포커스가 있든 페이지가 반응해야 하는 경우 document를 사용하고, 동작이 특정 폼 컨트롤에 속하는 경우 해당 컨트롤에 연결하세요. 콜백은 KeyboardEvent를 매개변수로 받으므로, 전역 event 값에 의존하지 말고 해당 매개변수에 이름을 지정하고 그 속성을 읽으세요.

이 실행 가능한 예시는 document의 작은 대체물을 사용하고 키 이벤트 하나를 제공하므로, 해당 리스너 형태를 JavaScript 런타임에서 시도해 볼 수 있습니다. 브라우저에서는 실제 document를 사용하여 키보드 입력을 받으세요.

const listeners = new Map();
const document = {
  addEventListener(type, callback) {
    listeners.set(type, callback);
  }
};

document.addEventListener("keydown", (event) => {
  console.log(`Key pressed: ${event.key}`);
});

listeners.get("keydown")({ key: "ArrowDown" });

실제 브라우저는 사용자가 키를 누를 때 콜백을 호출합니다. 위의 대체물은 핸들러가 사용하는 것과 동일한 key 값을 포함하는 객체로 콜백을 호출합니다. 브라우저 입력이나 기타 KeyboardEvent 동작을 시뮬레이션하지는 않습니다.

keydown과 keyup 중에서 선택

키를 누르면 keydown 이벤트가 발생합니다. 키를 누르고 있는 동안 게임 캐릭터를 이동시키는 것과 같이 즉시 시작되어야 하는 동작에 적합합니다. keyup 이벤트는 키를 놓을 때 발생하며, 사용자가 키를 누르고 있는 것을 마친 후 발생해야 하는 동작에 적합합니다. 동작이 발생해야 하는 시점에 따라 이벤트를 선택하세요. 키를 누르고 있으면 반복적인 keydown 이벤트가 발생할 수 있으므로, 동작이 한 번만 발생해야 하는 경우 이를 고려하세요.

KeyboardEvent.key 읽기 및 특수 키 처리

핸들러에서 키를 식별하려면 event.key를 사용하세요. 이는 "a", "Enter", "ArrowDown"과 같은 읽을 수 있는 값을 반환하므로 비교가 간단합니다. 예를 들어, 화살표 키 핸들러는 항목을 아래로 이동하기 전에 event.key === "ArrowDown"인지 확인할 수 있습니다. 수정자 상태도 이벤트에서 사용할 수 있으며, event.shiftKey 및 event.ctrlKey와 같은 속성을 통해 얻을 수 있습니다.

event.key의 값은 활성 키보드 레이아웃과 수정자에 따른 키의 의미를 반영합니다. 레이아웃 전반에 걸쳐 같은 위치에 유지되는 게임 컨트롤과 같이 동작이 물리적 키 위치를 따라야 하는 경우 event.code를 사용하세요. 일반적인 명령과 이름이 지정된 키의 경우, 대개 event.key가 더 명확한 선택입니다.

필요한 경우 키의 기본 동작 방지

키보드 이벤트 핸들러는 event.preventDefault()를 호출하여 사용자 정의 인터페이스에 화살표 키를 사용할 때의 스크롤과 같이 해당 키와 연관된 브라우저 동작을 억제할 수 있습니다. 페이지가 해당 동작에 대한 책임을 질 때만 호출하고, 동작이 취소 가능성에 의존하는 경우 event.cancelable을 확인하세요. 이는 이벤트가 다른 리스너에 도달하는 것을 막지 않습니다. 전파 메서드는 그것 또한 의도한 동작일 때만 사용하세요. 일반적인 키 감지에는 취소가 필요하지 않습니다.

keypress를 일반적으로 피해야 하는 이유

새로운 키보드 처리에는 keypress 사용을 피하세요. 이는 더 이상 사용되지 않으며 전체 키 범위를 일관되게 다루지 않습니다. 키보드 동작을 관찰하려면 keydown 또는 keyup을 사용하고, 키 값을 읽으려면 event.key를 사용하세요. 현재 코드에서는 event.char나 레거시 keyCode 속성에 의존하지 마세요. 키와 그 상태를 설명하는 표준 이벤트 속성을 사용하세요.