이벤트 타입과 속성의 이해
자바스크립트는 웹페이지에서 발생하는 모든 이벤트를 제어할 수 있습니다.
웹페이지에서 발생하는 이벤트의 대부분은 키보드, 마우스 이벤트이며, 이들 이벤트를 제어하고 실행하는 부분을 중점적으로 다루어봅니다.
자바스크립트는 발생하는 이벤트를 처리하기 위해 이벤트 리스너라는 전역 메서드를 사용합니다.
이벤트 리스너는 특정 이벤트 타입이 발생하면, 콜백 함수라는 정해진 함수를 실행해 이벤트에 대한 사용자 처리를 할 수 있도록 연결하는 역할을 합니다.
모든 자바스크립트의 이벤트 처리의 시작점입니다.
이벤트 등록
이벤트 리스너를 사용해 이벤트를 등록해보겠습니다.
window.addEventListener('click', (e)=>{
// 마우스 클릭 이벤트 처리
};
이렇게 등록한 마우스 클릭 이벤트 처리 이벤트 리스너는 웹페이지 전체에서 마우스 클릭이 발생할 때마다 콜백함수를 실행합니다.
"click" 은 이벤트 타입입니다.
마우스, 키보드, 또는 다른 이벤트 종류에 따라 발생하는 이벤트의 고유 이름이 있으며, 어떤 이벤트에 대해 어떤 이름을 등록해야하는지 알고 있어야 이벤트에 대한 처리를 할 수 있습니다.
마우스 이벤트 타입
마우스 이벤트는 대상 엘리먼트가 있고, 대상 엘리먼트를 기준으로 발생하는 이벤트를 이벤트 리스너에 등록해 처리합니다.
전역으로 윈도우(또는 도큐먼트) 객체에 마우스 이벤트를 등록해 처리하는 경우는 화면 스크롤과 같은 특정 이벤트 처리에만 국한됩니다.
마우스 이벤트는 유사한 이벤트들이 있기 때문에 사용할 때 조금 주의해야 합니다.
예를 들어 "mouseout" 과 "mouseleave" 는 대상 엘리먼트 바깥으로 마우스 커서가 나가면 발생합니다.
"mouseout" 은 자식 엘리먼트에서 발생한 이벤트가 버블링 되어 대상 엘리먼트까지 올라오기 때문에 자식 엘리먼트에서 마우스 커서가 바깥으로 나가면 "mouseout" 이벤트가 발생합니다.
반면 "mouseleave"는 대상 엘리먼트 자신의 바깥으로 마우스 커서가 나갈때만 발생합니다.
이벤트가 자식 엘리먼트까지 포함해 발생하는지 아닌지 구분해서 사용해야 합니다.
또한, 이벤트가 버블링되어 대상 엘리먼트까지 영향을 미치는지도 주의해야 합니다.
이벤트 타입 |
설명 |
click |
마우스 클릭 |
dblclick |
마우스 더블클릭 |
mousedown |
마우스 버튼 누름 |
mouseenter |
마우스 커서가 대상 엘리먼트 안으로 들어갈 때 1번 발생. |
mouseleave |
마우스 커서가 대상 엘리먼트 바깥으로 나가면 발생함. 대상 엘리먼트 한정이며 자식 엘리먼트에서는 이벤트 발생하지 않음. 이벤트 버블링 없음. |
mousemove |
대상 엘리먼트 위에서 마우스가 이동하면 발생함. 자식 엘레먼트부터 대상 엘리먼트까지 이벤트가 버블링 됨. |
mouseout |
대상 엘리먼트, 또는 자식 엘리먼트의 바깥으로 이동하면 1번 발생함. 자식 엘리먼트 사이에서 이동할 때도 발생함. 자식 엘리먼트에서 대상 엘리먼트까지 이벤트가 버블링 됨. |
mouseover |
마우스가 대상 엘리먼트나 그 자식 엘리먼트 위로 이동하면 1번 발생함. 대상 엘리먼트와 자식 엘리먼트 사이를 이동할 때도 1번 발생함. 자식 엘리먼트에서 대상 엘리먼트까지 이벤트가 버블링 됨. |
mouseup |
마우스 버튼 누름 해제. |
contextmenu | 컨텍스트 메뉴를 표시합니다. 마우스 오른쪽 버튼 클릭에 대응합니다. |
키보드 이벤트 타입
입력값이 표시되는 문자 키만 입력받고 싶을 경우 "keypress" 이벤트를 사용합니다.
이벤트 타입 |
설명 |
keydown |
키보드 키를 누름 모든 키보드 키에 대해 이벤트 발생(SHIFT, ALT, CTRL, 펑션키 등) |
keyup |
키 눌림 해제 |
keypress |
키보드 키를 누름 문자 키에 대해서만 이벤트 발생 |
마우스 이벤트 속성
속성이 정의되어 있지만, 실제로 사용되지 않는 것은 제외했습니다.
X/Y 좌표값을 얻는 속성들은 대상을 기준으로 하는 상대 좌표값을 반환하며, 기준 대상은 화면, 윈도우, 도큐먼트, 엘리먼트, 직전 위치 중 하나가 됩니다.
마우스 속성은 키보드 특수 키 눌림 여부, 누른 마우스 버튼, 상대 위치 좌표값 정보를 기준에 따라 선택적으로 표시합니다.
속성(Property) |
설명 |
clientX clientY |
마우스 이벤트가 발생했을 때, 마우스 커서의 현재 윈도우에 대한 상대 위치 좌표값을 알 수 있습니다. |
movementX movementY |
마우스 이벤트가 발생했을 때, 직전 마우스 이동 이벤트가 발생했을 때의 위치에 대한 상대적인 이동 크기를 알 수 있습니다. |
offsetX offsetY |
대상 엘리먼트의 모서리 위치로부터 상대적인 마우스 좌표를 알 수 있습니다. |
pageX pageY |
마우스 이벤트가 발생했을 때, 현재 도큐먼트를 기준으로 한 상대적인 마우스 좌표를 알 수 있습니다. |
screenX screenY |
마우스 이벤트가 발생했을 때, 현재 모니터 화면에 대한 상대적인 마우스 좌표를 알 수 있습니다. |
button |
마우스 이벤트가 발생했을 때, 어떤 마우스 버튼이 눌렸는지 알 수 있습니다. 0 : 왼쪽 버튼 1 : 휠 버튼(또는 가운데 버튼) 2 : 오른쪽 버튼 |
buttons |
마우스 이벤트가 발생했을 때, 어떤 마우스 버튼이 눌렸는지 알 수 있습니다. 추가적인 멀티펑션 버튼이 있는 마우스 대응입니다. 거의 사용되지 않으며, 사파리 브라우저는 지원하지 않습니다. PC 데스크탑 용 브라우저 전용으로 멀티펑션 버튼을 필요로 하는 웹서비스에만 제한적으로 사용 가능합니다. 1 : 왼쪽 버튼 2 : 오른쪽 버튼 4 : 휠 버튼(또는 가운데 버튼) 8 : 4번째 버튼(뒤로가기) 16 : 5번째 버튼(앞으로 가기) |
which |
마우스 이벤트가 발생했을 때, 어떤 마우스 버튼이 눌렸는지 알 수 있습니다. 0 : 버튼 안눌림 1 : 왼쪽 버튼 2 : 휠 버튼(또는 가운데 버튼) 3 : 오른쪽 버튼 |
altKey shiftKey ctrlKey |
마우스 이벤트가 발생했을 때, ALT, SHIFT, CTRL 키가 눌렸는지 알 수 있습니다. CTRL + 마우스 클릭과 같은 키보드, 마우스 조합 커멘드를 구현할 때 사용할 수 있습니다. |
마우스 좌표의 상대 기준이 되는 대상은 다음과 같이 구분할 수 있습니다.
어떤 버튼이 눌렸는지 알 수 있는 "button", "which" 속성은 사실상 같은 속성이며 속성 숫자값만 다릅니다.
"buttons" 속성을 사용하지 않는 것을 추천합니다. 마우스 멀티펑션 추가 버튼이 있는 마우스에 대한 확장 지원을 목적으로 제안된 속성으로, 애플 기기, 모바일 기기, 사파리 브라우저에서는 지원되지 않습니다.
키보드 이벤트 속성
charCode 와 keyCode 는 유니코드를 반환합니다. 그 외에는 ASCII 코드를 반환하는 것이 기본입니다.
keyCode, which 와 같이 숫자 유니코드 코드를 반환하는 속성을 사용하는 것이 조건절로 입력 범위를 제한할 수 있어서 개발에 편리합니다.
속성(Property) |
설명 |
charCode |
발생한 이벤트의 유니코드 문자 코드값 |
code |
발생한 이벤트의 키에 해당하는 상세 문자열 이름 반환 알파벳 "a" 는 KeyA, 왼쪽 쉬프트 키는 "ShiftLeft", 오른쪽 CTRL 키는 "ControlRight" 와 같은 상세 문자열로 표현 |
key |
발생한 이벤트의 키에 해당하는 문자열 이름 반환 알파벳, 숫자 외에 Shift, HanjaMode, End, Alt 와 같은 문자열로 입력 키를 표현 |
keyCode |
"keypress" 이벤트에 의해 발생한 유니코드 문자 코드, 또는 "keydown", "keyup" 이벤트에 의해 발생한 유니코드 키 코드 반환 |
which |
keyCode 와 같음 |
shiftKey altKey ctrlKey |
이벤트가 발생했을 때 SHIFT, ALT, CTRL 키가 눌렸는지를 불리언으로 반환 |
isComposing |
"compositionstart" 와 "compositionend" 사이에 발생하며, 글자 조합 모드인지를 불이언으로 표시합니다. |
location |
CTRL, ALT 처럼 키보드 왼쪽 오른쪽에 2개씩 쌍으로 있는 제어키의 방향, 또는 숫자 키패드 여부를 알 수 있도록 위치 정보를 반환합니다. 숫자 상수를 반환하며, 숫자 상수의 내용은 다음과 같습니다. 0. DOM_KEY_LOCATION_STANDARD: 위치 구분이 있는 키와 숫자 키패드를 제외한 대부분의 키 1. DOM_KEY_LOCATION_LEFT: 왼쪽 CTRL, ALT 누름 2. DOM_KEY_LOCATION_RIGHT: 오른쪽 CTRL, ALT 누름 3. DOM_KEY_LOCATION_NUMPAD: 숫자 키패드 누름 |
repeat |
키를 계속 누르고 있어 반복 입력 상태에 있는지 여부를 불리언으로 반환합니다 |
window.addEventListener('DOMContentLoaded', function(){ document.addEventListener('keydown', function(e){ console.log(e.charCode); console.log(e.keyCode); console.log(e.code); console.log(e.key); console.log(e.keyCode); console.log(e.which); console.log(e.isComposing); console.log(e.location); console.log(e.repeat); });});
