key 이벤트 [keydown, keypress, keyup 정리]

 

keydown: 키보드를 누를 때 실행. 계속 누르고 있는 경우에는 계속 실행 됨. [ 어떤 키가 눌러지더라도 반응 ALL]

keypress: 키보드를 누를 때 실행. 계속 누르고 있는 경우에는 계속 실행 됨. [입력이 반영되는 키만 반응]

keyup: 누른 키에서 손을 뗄 때 실행.

 

그렇다면 keydown 과 keypress 가 같은 기능일까?

> 아니다.

 

keypress 는 입력할 수 있는 키보드를 눌렀을때 에만 반응한다.

예를 들어 한글 입력,방향키,delete키와 같은 즉시 text에 입력이 반영되는  키보드가  아닌 것에는 이벤트가 반응하지  않는다.

 

반면에 keydown 은 키보드의 어떤 키가 눌러지더라도 반응한다.

 

key 이벤트 동작 순서 [ keydown -> keypress -> keyup ]

 

1. 키보드 'G'를 누른다

2. keydown 이벤트가 발생 [ input text  창에는 'G' 입력이 반영되지 않은 상태]

3. 'G'가 입력된다. [input text 창에 입력한 'G'가 반영된 상태]

4. keypress 이벤트가 발생한다.

5. 'G'  키에서 손을 뗀다.

6. keyup 이벤트가 발생한다.

 

 

html

<input type="text" id="keyText" />

<div>
<span id="keydown_div" style="width: 100px; height: 100px">KEY DOWN</span>
<span id="keypress_div" style="width: 100px; height: 100px">KEY PRESS</span>
<span id="keyup_div" style="width: 100px; height: 100px">KEY UP</span>
</div>

javascript+jquery

/*
 key event 발생 순서
 keydown -> keypress -> keyup
*/
$(document).ready(function(){
	$(document).on('keydown', '#keyText', function() {
  	$('#keydown_div').css('background-color', 'red');
  }).on('keypress', '#keyText', function() {
  	$('#keypress_div').css('background-color', 'blue');
  }).on('keyup', '#keyText', function() {
  	$('#keyup_div').css('background-color', 'green');
  });
});

https://jsfiddle.net/1f8btxh2/1/