JavaScript 키보드 이벤트
키보드 이벤트(Keyboard Event)는 사용자가 키를 누르거나 키를 놓을 때 발생한다.
키보드 이벤트 타입
키를 누를 때: keydown 타입 이벤트가 발생
키를 놓을 때: keyup 타입 이벤트가 발생
키보드 이벤트는 DOM 상에서 창(window)이나 문서(document), 또는 특정 엘리먼트(element)에서 발생할 수 있다.
키보드 이벤트 핸들러
이벤트에 반응(처리)하려면 이벤트가 발생했을 때 실행되는 함수인 핸들러(handler) 를 할당해야 한다. 핸들러는 사용자의 행동에 어떻게 반응할지를 자바스크립트 코드로 표현한 것이다.
핸들러는 DOM 프로퍼티와 addEventListener 를 사용하는 방법 두 가지를 사용해 할당할 수 있다. 대개는 두 방법 중 하나만을 사용해 할당한다.
DOM 프로퍼티
키보드 이벤트를 처리하는 방법으로는 DOM 프로퍼티에 addEventListener() 함수나 콜백(callback) 함수(onkeydown, onkeyup)를 설정하는 방법이 있다.
예를 들어, window에서 발생하는 keydown 이벤트를 처리하는 방법은 아래와 같다.
// 1. callback 함수를 설정하는 방법
window.onkeydown = (event) => console.log(event);
// 2. addEventListener() 함수를 이용하는 방법
window.addEventListener('keydown', event => console.log(event));❗주의: DOM 프로퍼티는 대·소문자를 구분한다
핸들러 할당 시 elem.onclick은 괜찮지만, elem.ONCLICK은 작동하지 않는다. DOM 프로퍼티는 대·소문자를 구분하기 때문이다.
addEventListener
HTML 속성과 DOM 프로퍼티를 이용한 이벤트 핸들러 할당 방식엔 하나의 이벤트에 복수의 핸들러를 할당할 수 없다는 근본적인 문제가 있다.
HTML 속성과 DOM 프로퍼티를 이용하는 대신 addEventListener 와 removeEventListener 라는 메서드를 이용하면 하나의 이벤트에 핸들러를 여러 개 할당할 수 있다.
문법은 다음과 같다.
element.addEventListener(event, handler, [options]);
//핸들러 삭제는 `removeEventListener`로 한다.
element.removeEventListener(event, handler, [options]);event: 이벤트 이름 (예:"keydown")handler: 핸들러 함수options:once,capture,passive프로퍼티를 갖는 객체
📝 DOM 프로퍼티에 할당할 수 없고 무조건 addEventListener를 써야 하는 이벤트가 몇개 있다. 좀 더 범용적인 addEventListener를 사용하는 버릇을 들이자.
키보드 이벤트 객체
이벤트를 제대로 다루려면 발생한 이벤트에 대해 상세히 알아야 한다. 예를 들어, keydown 이벤트가 발생했다면 어떤 키가 눌렸는지 등에 대한 상세한 정보가 필요하다.
이벤트가 발생하면 브라우저는 이벤트 객체(event object) 라는 것을 만들고, 이벤트 객체에 이벤트에 관한 상세한 정보를 넣은 다음, 핸들러에 인수 형태로 전달한다.
키보드 이벤트 객체에서 지원하는 프로퍼티 중 일부는 다음과 같다.
(예를 들어, 키보드의 1 키를 눌러보면 이벤트 핸들러 함수에 다음과 같은 키보드 이벤트 객체가 넘어오는 것을 볼 수 있다.)
KeyboardEvent {
key: "1",
code: "Digit1", //NumPad의 '1'을 누를 경우, code: "NumPad1"로 넘어온다.
type: "keydown",
shiftKey: false,
ctrlKey: false,
altKey: false,
//이하 생략
}대표적으로, key 속성에는 키 값이, code 속성에는 코드 값이, shiftKey 속성에는 Shift키가 눌린 여부가 들어있다. 이 메타정보들을 활용하면 다양한 키보드 이벤트 처리가 가능하다.
JAVASCRIPT.INFO의 브라우저 이벤트 문서에서 키보드 이벤트를 비롯한 여러 브라우저 이벤트에 대한 좀 더 자세한 내용을 확인할 수 있다.
