javascript 키보드 이벤트

<input type="type" id="inputBox" name="inputBox" />

keydown

키가 눌렸을 때 발생합니다.

 

inputBox.onkeydown = function(event) {
	console.log(event)
}

$('#inputBox').keydown(function(event) {
	console.log(event)
});

 

keypress

keydown과 동일하게 키가 눌렸을 때 발생하지만 shift, ctrl과 같은 키는 인식하지 않습니다.

 

 

inputBox.onkeypress = function(event) {
	console.log(event)
}

$('#inputBox').keypress(function(event) {
	console.log(event)
});

 

keyup

키를 놓을 때 발생합니다.

 

inputBox.onkeyup = function(event) {
	console.log(event)
}

$('#inputBox').keyup(function(event) {
	console.log(event)
});

 

 

공통

 

preventDefault

inputBox.onkeydown = function(event){
	event.preventDefault();
}

- 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다.

- a 태그의 href나 submit과 같은 이벤트에 preventDefault 함수를 걸어주면 기존의 내용들이 새로고침 되어 사라지는 현상을 방지할 수 있습니다.

 

Properties

Property	Type	Description
target	EventTarget	이벤트의 타겟(DOM의 최상위 타겟)
type	DOMString	이벤트의 타입
*bubbles	Boolean	버블링이 될 수 있는지 여부
cancelable	Boolean	이벤트가 취소될 수 있는지 여부
view	WindowProxy	document.defaultView
detail	long(float)
char	DOMString	키의 char형 값
key	DOMString	이벤트 키
keyCode	Unsigned long	입력된 키의 숫자 코드(ASCII or Windows 1252 code), 식별되지 않는 경우 0

 

참고

 

*bubbles

https://www.w3schools.com/jsref/event_bubbles.asp

bubbles Event Property

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링