[JS] onkeydown, onkeypress 차이점

키보드에서 키를 눌렀을 때 이벤트를 발생시키는 이벤트 처리기가 있다.

onkeydown / onkeypress 인데 두 이벤트 처리기의 차이점을 간단하게 정리하려고 한다.

 

우선, 차이점을 알아보기 위해 input 태그를 하나 생성한다.

 

<input name="title">

 

그리고 name 프로퍼티 값이 title인 input 태그에서 키를 눌렀을 때 어떤 키가 눌렸는지 확인하기 위해

keycode를 console.log()로 출력하는 script 코드를 작성한다.

 

<script type="text/javascript">
// onkeydown
document.getElementsByName('title')[0].onkeydown = function (event) {
	console.log("keycode: " + event.keyCode);
}
// onkeypress
document.getElementsByName('title')[0].onkeypress = function (event) {
	console.log("keycode: " + event.keyCode);
}
</script>

 

onkeydown

 

input 태그에 abcdABCD를 입력했을 때 console에는 65(A),66(B),67(C),68(D)가

순서대로 반복돼서 찍히는 것을 확인할 수 있다.

 

소문자 a의 ASCII CODE값은 97인데 대소문자와는 상관없이

모두 대문자의 ASCII CODE값을 반환하는 것을 알 수 있다.

정확히 말하자면 onkeydown의 경우에는 ASCII CODE 값이 아닌

키마다의 고유한 keycode를 반환한다고 할 수 있다.

 

onkeypress

 

똑같이 input 태그에 abcdABCD를 작성했는데 onkeydown과는 다르게 onkeypress 이벤트 처리기는

대소문자를 구분한 ASCII CODE값을 반환해주었다.

ASCII CODE 값을 반환하기 때문에 ctrl, alt, enter, backspace, 한/영 등의 키는 인식하지 못한다.