[Javascript] KeyboardEvent.key / 키보드 이벤트

☑️keyboardEvent.key

KeyboardEvent는 Shift와 같은 수정자 키 상태 및 키보드 로케일 및 레이아웃을 고려하여 사용자가 누른 키의 값을 반환

 

key values:

1. 눌린 키가 보여줄 수 있는 값을 가지고 있다면, Unicode character string을 반환한다.(ex. A, b, c, d, ㅇ, ㄷ…)
2. 눌린 키가 컨트롤이나 스페셜한 캐릭터라면, pre-define된 키 값을 반환한다.(ex. Ctrl, alt, shift…)
3. Dead 키가 입력되었다면, Dead라고 나타난다.
4. 값을 알 수 없는 키라면, Unidentified 발생

 

keyboardEvent sequence:

1. 키 입력시 keydown 이벤트 발생, 반복 입력시 keyboardEvent.repeat = true로 됨.
2. 키가 의미있는 글자를 발생시킨다면, beforeinput과 input이벤트가 차례로 발생한다. 
3. Keyup 이벤트가 발생하고 키는 풀리게 된다.

1, 3번에서 keyboardEvent.key 속성이 정의된다.

input event를 지원하지 않는 브라우저에서는 input, beforeinput 이벤트가 정상적으로 처리되지 않을 수 있다.

 

정리

• 키보드 이벤트 발생 순서: keydown → beforeinput → input → keyup
• 반복된 키 입력시 keyboardEvent.repeat = true: 반복이 불필요한 부분에서는 이를 block해버리면 쉬울 것 같다.
• key values를 통하여 해당 키의 값을 직접 가져올 수 있음: 외부 라이브러리/모듈의 참조를 최소화할 수 있다.