자바스크립트 키보드 이벤트: 키 누름, 뗌, 조합 키 사용하기

자바스크립트를 사용하여 웹 페이지에서 발생하는 키보드 이벤트를 처리하고 다양한 상호작용을 구현할 수 있습니다. 이 글에서는 자바스크립트로 키보드 이벤트를 처리하는 방법과 키 누름, 뗌, 조합 키 사용에 대해서 알아보겠습니다.

1. 키보드 이벤트 종류

자바스크립트에서는 다음과 같은 주요 키보드 이벤트를 처리할 수 있습니다.

▼ 키보드 이벤트

이벤트	설명
keydown	키가 눌렸을 때 발생합니다.
keyup	키를 뗄 때 발생합니다.
keypress	글자 키를 누르고 뗄 때 발생합니다. (특수 키는 처리하지 않음)

2. 이벤트 리스너 추가

이벤트 리스너를 추가하여 키보드 이벤트를 처리할 수 있습니다.

1. 예제 코드

<!DOCTYPE html>
<html>

<head>
     <title>키보드 이벤트 예제</title>
</head>

<body>
     <script>

     // 1. keydown 이벤트
     document.addEventListener('keydown', function (event) {
     console.log('키가 눌렸습니다: ' + event.key);
     });

     // 2. keyup 이벤트
     document.addEventListener('keyup', function (event) {
     console.log('키를 뗐습니다: ' + event.key);
     });

     // 3. keypress 이벤트
     document.addEventListener('keypress', function (event) {
     console.log('글자 키를 누르고 뗐습니다: ' + event.key);
     });

     </script>
</body>

</html>

2. 실행 결과 화면

3. 키보드 이벤트 객체 사용

키보드 이벤트를 처리할 때 이벤트 객체를 사용하여 키보드 이벤트에 대한 정보를 얻을 수 있습니다. 이벤트 객체는 다음과 같은 주요 속성을 제공합니다.

▼ 이벤트 객체의 속성

속성	설명
key	눌린 키의 문자열 값을 나타냅니다.
keyCode	눌린 키의 ASCII 코드 값을 나타냅니다. (deprecated)
code	눌린 키의 물리적 위치를 나타내는 문자열입니다.
altKey, ctrlKey, shiftKey	각각 Alt, Ctrl, Shift 키가 눌려 있는지 여부를 나타냅니다.

4. 조합 키 사용

조합 키를 사용하여 다양한 상호작용을 만들 수 있습니다.

1. 예제 코드

<!DOCTYPE html>
<html>
<head>
     <title>키보드 이벤트 예제</title>
</head>
<body>
     <script>
     document.addEventListener('keydown', function(event) {
     console.log('key: ' + event.key);
     console.log('keyCode: ' + event.keyCode);
     console.log('code: ' + event.code);
     console.log('altKey: ' + event.altKey);
     console.log('ctrlKey: ' + event.ctrlKey);
     console.log('shiftKey: ' + event.shiftKey);

     if (event.ctrlKey && event.key === 's') {
          event.preventDefault(); // 기본 동작(페이지 저장)을 방지
          console.log('Ctrl + S가 눌렸습니다.');
     }
     });
     </script>
</body>
</html>

☞ 키보드의 keydown 이벤트를 감지하여, 키보드 이벤트 객체의 key, keyCode, code, altKey, ctrlKey, shiftKey 속성을 콘솔에 출력합니다. 그리고 Ctrl + S 조합 키가 눌렸을 때 기본 동작(페이지 저장)을 방지하고 콘솔에 메시지를 출력합니다.