[다양한 이벤트 알아보기] 08. 키보드 이벤트

키보드로 할 수 있는 이벤트 타입은 mousedown과 mouseup처럼 key를 누르는 순간에 발생하는 keydown, keypress와 key를 눌렀다 뗀 순간에 발생하는 keyup이 있습니다. 그리고 키보드 이벤트가 발생했을 때 자주 사용되는 이벤트 객체의 프로퍼티는 key와 code라는 프로퍼티입니다. 각 이벤트 타입과 프로퍼티들이 어떤 특징을 가지고 있는지 좀 더 자세하게 살펴보겠습니다.

/** 
 * [키보드 이벤트]
 * 
 * > KeyboardEvent.type
 * keydown: 키보드 버튼을 누른 순간
 * keypress: 키보드 버튼을 누른 순간
 * keyup: 키보드 버튼을 눌렀다 뗀 순간
 * 
 * > KeyboardEvent.key
 * : 이벤트가 발생한 버튼의 값
 * 
 * > KeyboardEvent.code
 * : 이벤트가 발생한 버튼의 키보드에서 물리적인 위치
 */

input 태그를 클릭해서 키를 입력해보면 key와 code 프로퍼티들이 각각 어떤 값을 담고 있는지를 출력해 주고 또 발생한 이벤트 타입에 맞게 스타일도 변합니다. 

key를 누를 때 사용자가 어떤 값을 가진 key를 눌렀는지 알려주는 것이 key 프로퍼티 입니다.

codeit을 입력했을 때 가장 마지막으로는 알파벳 소문자 t가 입력되는 key가 눌렸습니다.

사용자가 키보드에서 어떤 위치에 있는 key를 눌렀는지 알려주는 것이 code 프로퍼티 입니다.

그래서 대문자 A와 소문자 a를 입력했을 때 key 값은 다르지만 code 값은 같은 경우도 있고 왼쪽 시프트와 오른쪽 시프트를 번갈아 눌러보면  key값은 같지만 code 값은 서로 다른 경우도 있으니까 각 프로퍼티가 어떤 값을 가지는지 명확하게 이해한 다음에 필요한 상황에 따라 적절하게 활용하면 좋을 것 같습니다.

 

이벤트 타입은 키보드 버튼을 누를 때느 keydown과 keypress 이벤트가 발생하고 키보드의 버튼을 떼는 순간에는 keyup 이벤트가 발생합니다. 사실 키보드 이벤트 타입은 이게 전부이지만 여기서도 한 가지 주의해야 될 점이 있습니다.

keypress는 알파벳이나 숫자 혹은 스페이스바로 띄어쓰기를 한 것과 같이 출력값이 변하는 key에서만 이벤트가 발생하고 esc나 시프트처럼 이렇게 기능적인 역할을 하는 key에는 이벤트가 발생하지 않습니다. 그리고 또 이런 식으로 하나의 key를 계속 누르고 있는 상황에서는 keypress는 한 번만 발생하고 keydown 이벤트만 연속적으로 발생합니다. 심지어는 출력이 가능한 key더라도 이렇게 영어가 아닌 경우에는 반응하지 않는 문제도 있습니다. 상황에 따라서 이러한 특징을 의도적으로 활용한다거나 혹은 오래된 프로젝트에서 keypress 이벤트를 접할 수도 있기 때문에 참고해두면 좋지만 keypress 이벤트는 웹 표준에서는 권장하지 않는 방법이기 때문에 key를 누르는 순간에 동작할 이벤트가 필요하다면 keypress보다는 keydown 이벤트를 사용하는 것을 추천드립니다.