[JavaScript] keydown vs keypress vs keyup의 차이에 대해

출처: https://unsplash.com/ko/%EC%82%AC%EC%A7%84/B8ef92J_UyE

팀프로젝트를 진행할 때,  undo, redo 기능 구현하면서 key 이벤트를 사용해야했다. 여러 key 관련 event들이 있었지만 프로젝트 진행 당시에는 큰 생각없이 해당 이벤트를 사용했다. 해당 기능을 구현하는데 큰 문제는 없었지만, 명확하게 이해하며 개발하고 싶기 때문에 key 관련 event들의 차이점을 정리해본다.

keypress

• 문자 등의 입력을 하였을때 화면에 보여지는(입력되는) 알파벳, 숫자 등의 key에만 반응
• delete, arrows, page up, page down, home, end, ctrl, alt, shift, esc 등의 key에는 반응하지 않음
• 사용자가 key를 한 번 누르거나 계속해서 누르고 있을 때마다 해당 이벤트 계속해서 발생

keydown

• keypress와 마찬가지로 문자 등의 입력키에 반응하고 shift, esc, ctrl 등의 문자 등의 입력키가 아닌 키에도 반응함
• 사용자가 key를 한 번 누르거나 계속해서 누르고 있을 때마다 해당 이벤트 계속해서 발생

keyup

• key를 눌렀다 뗄때에만 한 번 반응

 

Reference

https://thisthat.dev/keydown-vs-keypress-vs-keyup/