[javascript] 키보드 이벤트 처리하기

14 Dec 2023

javascript

이 글에서는 JavaScript를 사용하여 웹 페이지에서 키보드 이벤트를 처리하는 방법에 대해 알아보겠습니다.

1. 이벤트 리스너 등록하기

document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    // Enter 키가 눌렸을 때 처리할 내용
  }
});

위 코드는 keydown 이벤트가 발생할 때마다 해당 함수를 실행하여 Enter 키가 눌렸을 때 원하는 동작을 처리합니다.

2. 특정 키 입력 감지하기

document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowLeft') {
    // 왼쪽 화살표 키가 눌렸을 때 처리할 내용
  }
});

위 코드는 왼쪽 화살표 키가 눌렸을 때 특정 동작을 처리하는 예시입니다.

3. 기본 이벤트 제어하기

document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowUp') {
    event.preventDefault(); // 기본 스크롤 이벤트 제어
    // 화면 스크롤 대신 특정 동작 수행
  }
});

화면 스크롤을 제어하거나 기본 키 동작을 막기 위해 event.preventDefault()를 사용할 수 있습니다.

4. 여러 키 조합 처리하기

let isCtrlPressed = false;

document.addEventListener('keydown', function(event) {
  if (event.key === 'Control') {
    isCtrlPressed = true;
  }
  if (isCtrlPressed && event.key === 's') {
    event.preventDefault(); // 기본 저장 이벤트 제어
    // Ctrl + S 조합키 입력 시 특정 동작 수행
  }
});

document.addEventListener('keyup', function(event) {
  if (event.key === 'Control') {
    isCtrlPressed = false;
  }
});

여러 개의 키를 조합하여 특정 동작을 처리할 수 있습니다. 위 코드는 Ctrl + S 조합키 입력 시 기본 저장 이벤트를 제어하고 특정 동작을 수행하는 예시입니다.

마무리

JavaScript를 사용하여 키보드 이벤트를 처리하는 방법에 대해 알아보았습니다. 이를 활용하여 웹 애플리케이션에서 키보드 입력에 반응하는 다양한 기능을 구현할 수 있습니다.