JavaScript 시리즈☕
key 이벤트 [keydown, keypress, keyup 정리]
@ENFJ
2023. 9. 22. 09:46
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');
});
});