[JavaScript] 06. 이벤트 - KeyboardEvent

KeyboardEvent 인터페이스

 KeyboardEvent 인터페이스는 키보드와 사용자가 상호 작용하여 발생하는 이벤트를 나타낸다.

 

-ASCII 키 : a~z, A~Z, 0~9, 엔터 등 

발생하는 이벤트: keydown - keypress - keyup

keydown, keyup: a키 또는 A 키를 누르면 keyCode는 모두 65

 

keypress : a 키는 97, A는 65

keydown, keyup 이벤트는 keyCode 속성으로 대문자를 구분할 수 없음 

keypress는 실제 눌러진 키코드를 반환

 

- F1~F12, Alt, Ctrl, Shift 등 특수키 

발생하는 이벤트 : keydown~keyup

주요 속성	설명
altKey  code	키 이벤트가 트리거 되었을 때"ALT"키를 눌렀는지 여부를 반환
ctrIKey	키 이벤트가 트리거 되었을 때"CTRL"키를 눌렀는지 여부를 반환
shiftKey	키 이벤트가 트리거 되었을 때"SHIFT키를 눌렀는지 여부를 반환
code	키보드의 실제 키값을 반환. A 나 a 키를 누른 경우 KeyA로 반환 된다.
key	이벤트로 표시된 키의 키 값을 문자열로 반환 한다. 소문자 a키를 누르면 a, 대문 자 A키를 누르면 A를 반환
keyCode	onkeypress이벤트를 트리거 한 키의 유니코드의 문자코드 또는 lonkeydown 또는 onkeyup 이벤트를 트리거 한 키의 유니코드의 키 코드를 반환. 더 이상 사용을 권장하지 않는다.

 

 

key 코드는 새로 나온 속성으로 keyCode보다는 key 사용을 권장한다.

key는 현재 모든 브라우저가 지원된다고 보장 받을 수 없다. (오래된 브라우저의 경우 지원이 안 될 수 있다)

따라서 다음과 같은 형태로 사용한다.

let key = e.key||e.keyCode;

key가 없으면 keyCode를 사용해라 ~ 

 

 

 

keydown

inputs.onkeydown = function(e) {
	let keyCode = e.keyCode;
	// a를 누르면 65, A를 누르면 65
	let key = e.key; // 모든 브라우저가 지원하지 않음 
	// a를 누르면 'a', A를 누르면 'A'
	let s = "keydown:" + keyCode + "," + key + "<br>";
    layout.innerHTML = s;
}

 

ketpress

inputs.onkeypress = function(e) {
	let keyCode = e.keyCode;
	// a를 누르면 97, A를 누르면 65
	let key = e.key; // 모든 브라우저가 지원하지 않음
	// a를 누르면 'a', A를 누르면 'A'
	let s = "keypress:" + keyCode + "," + key + "<br>";
    layout.innerHTML += s;
}

 

keyup

inputs.onkeyup = function(e) {
	let keyCode = e.keyCode;
	// a를 누르면 65, A를 누르면 65
	let key = e.key; // 모든 브라우저가 지원하지 않음 
	// a를 누르면 'a', A를 누르면 'A'
	let s = "keyup:" + keyCode + "," + key + "<br>";
	layout.innerHTML += s;
}