[javascript] key event 이해하기

오늘은 간단한 key event에 대해 이해해보는 시간을 가져보고자 합니다. 

key event는 지금 제가 타이핑하고 있는 이 순간에도 일어나고 있습니다. ㅎㅎ 

즉 타이핑을 할때마다 key event가 발생하게 됩니다. 총 keydown, keyup, keypress 이렇게 

총 3개의 이벤트가 발생하게 되는데요. 각각의 이벤트가 언제 발생하는지 알아봅시다. 

 

첫째로 keydwon

 key + down : keyboard가 down 되었을 때. 즉  키보드가 눌렀을 때 실행되는 이벤트입니다. 

 

둘째로 keypress

 key + press : key가 press 되었을때, 즉 글자가 눌렀을 때 실행되는 이벤트입니다. 

 keydown이벤트와 동일하게 키보드가 눌렀을때 실행되지만, 큰 차이점이 있습니다. 

 keydown이벤트는 모든 키보드(글자.숫자. alt, F1 등등)를 입력 시 일어나는 이벤트

 keypress는 key(글자, 숫자)를 입력했을 때 일어나는 이벤트 입니다.

 

셋째로 keyup

 key  + up : keyboard가 up 되었을 때, 즉 키보드가 눌러졌다가 했을 때 실행되는 이벤트입니다.

keydown : 키보드가 눌렀을 때 모든 키보드의 이벤트를 바라보고 있는다. (글자. 숫자. alt, shift, 등)

keypress : 키를 눌렀을 때 키의 이벤트를 바라보고 있는다.  (글자, 숫자)

keyup : 키보드가 눌러졌다 땠을 때 모든 일어나는 이벤트,  (글자. 숫자. alt, shift, 등)

 

간단하게 테스트를 해보자 

https://codesandbox.io/s/trusting-wood-qcf84

trusting-wood-qcf84 - CodeSandbox

조금만 테스트해보면 알 수 있는데, 한국어는 key로 인식되지 않아 keypress 이벤트가 발생하지 않는다. 

하지만 keydown 이벤트는 발생하는 것을 알 수 있는데, 즉 keypress보다 keydown, keyup을 좀 더 많이 쓰게 된다고 봐도 무방하다. keydown과 keyup 둘 중에 어느 게 더 안전할까? 

 

개념을 살펴보면 어느 정도 답이 나오는데, keyup의 경우는 keydown이 되어야지 keyup이 될 수 있게 된다.

즉 keyup에서 발생하는 이벤트를 처리하는 게 안전하다고 볼 수 있다.