JavaScript-키보드와 마우스 이벤트 그리고 x, y 좌표

키보드 이벤트

keydown 키보드 키를 눌렀을 때 발생
keyup 키보드 키를 눌렀다 놓았을 때 발생
keypress 키보드 키를 계속 누르고 있을 때 발생
ArrowLeft ArrowRight ArrowUp ArrowDown 각 방향을 확인할 수 있음

아래의 속성들은 다른 키와 동시에 누를 때 사용
event.ctrlKey Ctrl키
event.altKey Alt키
event.shiftKey Shift키
event.metaKey Win키

마우스 이벤트

mousedown 클릭할 때 발생
mouseup 클릭했다 뗄 때 발생
mousemove 마우스를 움직일 때 발생
dblclick 마우스 더블클릭 시 발생

x, y 좌표

• clientX, clientY는 현재 브라우저 페이지 내에서의 x, y 좌표를 가리킨다(픽셀 단위).
• pageX와 pageY도 브라우저 페이지 내에서의 x,y 좌표를 가리키지만, 스크롤이 있는 경우 스크롤한 픽셀 값까지 포함한다.
• offsetX와 offsetY는 이벤트를 연결한 대상을 기준으로 마우스의 x, y 좌표를 가져온다.
• screenX와 screenY는 모니터를 기준으로 모니터의 왼쪽 모서리가 0이 된다.
• movementX와 movementY는 지난 mousemove 이벤트와 비교해 얼마나 마우스를 움직였는지 표시하므로 mousemove 이벤트인 경우에만 실제 값이 잡힌다.