[JQuery] 키보드 이벤트 발생 순서 (keydown / keypress 차이)

키보드 이벤트

키보드 이벤트 발생 순서

1. 키보드를 누릅니다.

2. keydown 이벤트가 발생합니다.

3. 글자가 입력됩니다.

4. keypress 이벤트가 발생합니다.

5. 키보드에서 손을 뗍니다

6. keyup 이벤트가 발생합니다.

이벤트 발생 확인하기 ※직접 입력해보세요.

	keydown
	keypress
	keyup

위를 통해 테스트해보시면 알겠지만 keypress 는 입력할 수 있는 키보드(영어, 숫자 등)가 눌렸을 때에만 이벤트가 발생합니다.

또한 한글 입력, 방향키, del키 등은 keypress 이벤트를 발생시키지 않습니다.

※ 위 이벤트 체크하는 자바스크립트 코드입니다.

function keyEv(selectorID){
    var c = $('#'+selectorID).css('background-color');
    var startIdx = c.indexOf('(')+1;
    var endIdx = c.indexOf(')');
                
    var rgb = c.substring(startIdx, endIdx).split(',');
    rgb[0] = parseInt(rgb[0]);
    rgb[1] = parseInt(rgb[1]);
    rgb[2] = parseInt(rgb[2]);
    rgb[0] += (rgb[0] <= 255) ? 2 : 0;
    rgb[1] += (rgb[1] <= 255) ? 2 : 0;
    rgb[2] += (rgb[2] <= 255) ? 2 : 0;
    $('#'+selectorID).css('background-color', 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')');
}
 
function changeColor(tdID){
    $('#'+tdID).css('background-color', '#FF2424');
    $('#'+tdID).css('color', '#FFFFFF');
    var id = setInterval(function() {
        keyEv(tdID);
    }, 1);
    setTimeout(function(){
        clearInterval(id);
        $('#'+tdID).css('color', '#CCCCCC');
    }, 1000);
}
 
$(document).on('keydown', '#inputText', function() {
    changeColor('keydownTD');
});
$(document).on('keypress', '#inputText', function() {
    changeColor('keypressTD');
});
$(document).on('keyup', '#inputText', function() {
    changeColor('keyupTD');
});