keydown, keyup, keypress 이벤트

1. keydown

키보드 키가 내려갔을 때 동작.

2. keyup

키보드 키가 올라갔을 때 동작.

3. keypress 

키보드 키가 입력되었을 때 동작.

 

keydown과 keypress 이벤트는 언뜻 비슷해보여 직접 사용해보지 않으면 구분이 어려운 이벤트이다.

그러나 분명한 차이가 있는데 keydown은 키눌림 유무를 감지하고, keypresss는 입력값의 유무를 감지한다는 것.

window에 keydown과 keypress 이벤트를 달아 감지하도록 하고 키보드를 눌러 확인해보자.

 

 

 

1이나 q같이 입력값이 있는 키는 keydown과 keypress 모두 이벤트를 감지하고 있다. 반면 ctrl, alt, del과 같은 기능키는 keydown로만 감지할 수 있고 keypress로는 불가하다. 

 

또 한가지, keypress는 한글도 인식하지 않는다. keydown, keyup은 인식 자체는 가능하나 모든 key를 Process로 인식한다.

 

 

https://itso-wavy.github.io/JS-challenges/NumberOnlyInput/index.html

예전에 만들었던 숫자 입력기 링크이다.

코드를 상기해보면, 기능키 입력을 감지하기 위해 keydown을 사용하면서도 한글 입력은 e.keycode로 분리하여 별도 처리를 해주었었다. 참고로 keycode 프로퍼티는 현재 deprecated 상태이므로 다른 프로퍼티를 사용하는 게 좋다.

 

추가로 키가 입력될 때마다 감지하는 것을 원하지 않는다면 keyup으로 키가 올라오는 단 한번만 감지하도록 하는 것도 좋은 방법이겠다. 

 

See the Pen Untitled by wavy (@_wavy) on CodePen.

 

직관적인 학습이 가능하도록 코드펜 자료를 만들어보았다. 다른 블로그에선 아무렇지 않게 보던 것인데 이것 정말 귀찮고 재미있구나.