본문 바로가기
javascript&jquery/javascript

<javascript> keyboard이벤트(keydown-keyup-keypress)

by 써-뇽 2024. 4. 16.

자바스크립트의 키보드이벤트에는 keydown, keyup, keypress 이벤트가 있다.

· keydown이벤트
- 사용자가 키보드를 눌렀을 때 발생 
- 사용자가 키보드를 누를 때마다 한 번씩 발생하며, 눌린 키와 상관없이 발생(shift, tab등 가능)
- 사용자가 키를 길게 누르고 있을 시 반복적으로 발생하지 않음

· keyup이벤트
- 사용자가 키보드를 눌렀다가 떼었을 때 발생
- keydown/keypress이후  keyup이벤트 발생
* keypress의 경우 shift, ctirl, alt 키 누르면 keypress이벤트 발생X, 그러나 뗄 경우 keyup이벤트 발생

· keypress이벤트
- 사용자가 키보드를 눌렀을 때 발생
- 키보드를 계속 누르고 있는 경우 계속 이벤트 발생
- 실제 키를 누를 때만 발생(keydwon과 다르게 shift,ctrl,alt등 키에 반응X)

 


아래 코드의 경우
text_box(좌측 텍스트상자) : keydown-keyup 이벤트
text_box_2(우측 텍스트상자) : keypress-keyup 이벤트 확인이 가능하다. 

✅keydown과 keypress 두 이벤트 모두
사용자가 키보드를 눌렀을 때 발생하는 이벤트지만 
keydown이벤트의 경우 눌린 키와 상관없이 발생되고 (shift.ctrl.tab등의 키에도 이벤트가 실행),
keypress는 실제 키에만 발생됨을 확인 할 수 있다.(shift.ctrl.tab등의 키 이벤트x)