[JS] 키보드 이벤트

 

안녕하세요! 이번 포스팅에서는 JavaScript 키보드 이벤트에 대해 알아보려고 해요. 키보드 이벤트는 사용자가 키보드를 통해 입력하거나 조작할 때 발생하는 이벤트를 의미해요. 우리가 로그인할 때 비밀번호를 입력하거나, 어떤 텍스트 필드를 작성할 때 모두 키보드 이벤트가 발생하는 거죠! 그럼 JavaScript에서 키보드 이벤트를 어떻게 다루는지 알아보겠습니다.

 

 

커버 이미지 - 키보드

 

JavaScript 키보드 이벤트

 

키보드 이벤트

 

1. 자주 쓰는 키보드 이벤트

2. 키보드 이벤트 속성

3. 실전 코딩해보기

마무리

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

자주 쓰는 키보드 이벤트

1. keydown
   keydown 이벤트는 사용자가 키보드의 키를 눌렀을 때 발생하는 이벤트입니다. 키를 눌렀을 때 바로 이벤트가 발생하므로, 키가 눌리고 있는 동안 이벤트가 반복적으로 호출됩니다.
   

   document.addEventListener('keydown', function(event) {
       console.log(`키가 눌렸어요: ${event.key}`);
   });

2. keyup
   keyup 이벤트는 키보드의 키를 눌렀다가 뗐을 때 발생하는 이벤트입니다. 키를 누르고 있는 동안에는 아무런 이벤트가 발생하지 않다가, 키를 뗄 때 한 번만 호출됩니다.
   

   document.addEventListener('keyup', function(event) {
       console.log(`키를 뗐어요: ${event.key}`);
   });

3. keypress
   keypress 이벤트는 키를 눌렀을 때 발생하며, 주로 문자가 입력될 때만 동작합니다. 과거에는 keypress 이벤트도 많이 사용됐지만, 현재는 권장되지 않는 방식입니다. 지금은 keydown과 keyup이 더 일반적이고 권장되는 방법이므로 keypress보다는 keydown과 keyup을 사용하는 것이 좋습니다.
   

   // 사용하지 않는 것이 좋음
   document.addEventListener('keypress', function(event) {
       console.log(`키가 눌렸어요: ${event.key}`); // Shift, Esc 등의 키에는 반응하지 않음
   });

키보드 이벤트 속성

1. event.key
   event.key 속성은 사용자가 누른 키 값을 나타냅니다. 예를 들어 a 키를 눌렀으면 event.key는 "a", Enter를 눌렀다면 "Enter"를 반환합니다.
   

   document.addEventListener('keydown', function(event) {
       console.log(`누른 키: ${event.key}`);
   });

2. event.code
   event.code 속성은 키보드에서 물리적인 키의 위치를 나타냅니다. event.key와 달리 키보드 레이아웃에 상관없이 항상 동일한 값을 반환합니다. 예를 들어, qwerty 키보드에서 "KeyA"는 항상 A 위치에 있는 키를 나타냅니다.
   

   document.addEventListener('keydown', function(event) {
       console.log(`키 코드: ${event.code}`);
   });

3. event.ctrlKey, event.shiftKey, event.altKey
   이 속성들은 사용자가 키보드를 누를 때 Ctrl, Shift, Alt 같은 특수 키들이 함께 눌렸는지 여부를 true 또는 false 값을 반환해 알려줍니다.
   

   document.addEventListener('keydown', function(event) {
       if (event.ctrlKey) {
           console.log('Ctrl 키가 눌린 상태입니다!');
       }
       if (event.shiftKey) {
           console.log('Shift 키가 눌린 상태입니다!');
       }
   });

   
   
   

실전 코딩 해보기

keydown 이벤트에서 키가 눌리고 있는 동안 반복적으로 이벤트가 발생한다는 점과, 키보드 이벤트의 key, code 속성을 이용해 간단한 예제를 만들어 실습해 봤습니다.
키보드의 1, 2, 3, 4번 자판을 누르면 번호에 해당하는 박스가 검정색으로 칠해지고, shift 키를 누른 상태로 1, 2, 3, 4번 자판을 누르면 번호에 해당하는 박스가 초기 상태로 돌아오는 예제입니다.

 

See the Pen keyboard-event by 강수민 (@rtrnknpb-the-solid) on CodePen.

 

 

 

 

 

정리

JavaScript에서 키보드 이벤트는 사용자의 입력을 감지하고, 그에 맞는 반응을 처리할 때 정말 중요한 역할을 해요. keydown, keyup 이벤트를 활용해서 단축키를 만들거나, 폼 입력 시 다양한 동작을 제어할 수 있습니다. 키보드 이벤트의 다양한 속성을 잘 이해하고 활용하면, 웹 페이지에서 더욱 유용한 기능을 만들 수 있습니다.

직접 키보드 이벤트를 사용해보면서 웹 페이지에 재미있는 인터랙션을 추가해보세요!

 

 

추천글

 

2024.09.11 - [개발 공부 일지/JavaScript] - [JS] 마우스 이벤트

[JS] 마우스 이벤트