자바스크립트 keypress, keydown 이벤트의 차이점
자바스크립트의 키보드 이벤트에는 키를 누를 때 발생하는 유사한 2개의 이벤트(keypress, keydown)가 존재한다.
keypress : Character Code(ASCII Code)가 전달됨
- 눌린 키의 문자를 구할 때 사용
- 문자가 아닌 기능키(방향키 등)는 이벤트를 발생하지 않음
- 눌린 키의 문자코드(아스키 코드)가 이벤트 객체에 포함됨
- 대소문자 구분 가능
- 아스키코드를 문자로 변환할 때는 String.fromCharCode(ascii code) 함수를 사용하면 됨
keydown : 키보드 상의 키에 매핑된 코드(Key Code)가 전달됨
- 눌린 키를 단순히 식별하고자 할 때
- 문자키나 기능키 등의 모든 키에서 이벤트가 발생함
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.addEventListener("load", function(){
var input = document.getElementById("input1");
// 문자 코드(아스키 대소문자 구분): 눌린 키의 해당 문자를 얻고자 할 때
input.addEventListener("keypress", function(evt){
var charCode = event.which || event.keyCode; // keyCode는 IE8이전에서 사용
var ch = String.fromCharCode(charCode);
console.log("press:"+charCode+'('+ch+')');
});
// 키 코드 (대소문자 구분 없이 동일한 숫자가 리턴됨):
// 눌린 키를 식별하고자 할 때(방향키, ESC, Ctrl, Shift, Alt 키등)
input.addEventListener("keydown", function(evt){
var keyCode = event.which || event.keyCode;
console.log("down:"+keyCode);
});
});
</script>
</head>
<body>
<br>
<input type="text" id="input1">
</body>
</html>