JavaScript - KeyDown / KeyPress / KeyUp 이벤트

 

 

 

메시지 입력창에서 엔터키로 메시지 전송을 할 때나 줄바꿈을 할 때 키보드 이벤트를 사용하게 된다.

대표적인 키보드 이벤트인 keyDown / keyPress / KeyUp 에 대해서 정확히 알고싶어서 공부해보았다.

 

---

JavaScript - KeyDown / KeyPress / KeyUp 이벤트

 

• keyDown    키보드를 누를 때 + 계속 누르고 있는 경우 실행 (아무 키나 다 반응)
• keyPress    키보드를 누를 때 + 계속 누르고 있는 경우 실행 (text 입력되는 키만 반응 - 방향키, 탭 같은 거 제외) 
• keyUp         키보드를 눌렀다가 키에서 손을 뗄 때 실행

 

 

Key 이벤트 동작 순서

key event 사이의 동작 순서는 다음과 같다. keydown → keypress → keyup

하지만, 실제 글자가 입력되는 상황에서의 동작 순서는 다음과 같다.

1. 키보드 'G'를 누른다.
2. keydown 이벤트가 발생한다. (input text 창에는 'G'가 입력이 반영되지 않은 상태.)
3. 'G'가 입력된다. (input text 창에 입력한 'G'가 반영된 상태)
4. keypress 이벤트가 발생한다.
5. 'G' 키에서 손을 뗀다.
6. keyup 이벤트가 발생한다.

 

참고 블로그: 

Keydown, Keyup, Keypress의 비교