[이벤트] 4. 마우스 핸들링

4. 마우스 핸들링

- 웹 페이지 개발에 가장 많이 활용되는 마우스 관련 이벤트

 

마우스 이벤트 객체의 프로퍼티

- 마우스 관련 이벤트가 발생할 때 이벤트 객체에는 마우스 포인터의 위치, 클릭된 버튼 등의 정보가 담겨 있음

프로퍼티	설명
x,y	(x,y)는 타겟 객체의 부모 객체 내에서의 마우스 좌표
clientX, clientY	(clientX, clientY)는 브라저 윈도우의 문서출력 영역 내에서의 마우스 좌표
screenX,screenY	(screenX,screenY)는 스크린을 기준으로 한 마우스 좌표
offsetX, offsetY	(offsetX,offsetY)는 타겟 객체 내에서의 마우스 좌표
button	눌러진 마우스 버튼 * 0 : 아무 버튼도 눌러지지 않았음 * 1 : 왼쪽 버튼이 눌러졌음 * 2 : 오른쪽 버튼이 눌러졌음 * 3 : 왼쪽, 오른쪽 버튼이 모두 눌러졌음 * 4 : 중간 버튼이 눌러졌음
wheelDelta	마우스 휠이 구른 방향 * 양수 : 위쪽으로 굴린 경우 (실제 wheelDelta 값은 120) * 음수 : 아래쪽으로 굴린 경우 (실제 wheelDelta 값은 -120)

*onmouseenter/onmouseleave랑 onmouseover/onmouseout은 비슷하지만

onmouseenter/onmouseleave는 이벤트 버블 단계도 없고 여러가지 이유로 이거 대신 onmouseover/onmouseout을 추천

 

oncontextmenu

- 사용자가 마우스 오른쪽 버튼을 클릭할 때 출력되는 메뉴를 컨텍스트 메뉴(context menu)라고 한다.

- 컨텍스트 메뉴에는 보통 소스 보기나 이미지 다운로드 등의 기능을 둔다.

- 하지만 컨텍스트 메뉴가 출력되기 전 oncontextmenu 리스너가 먼저 호출되므로 여기서 개발자가 특별한 작업을 할 수 있다.

- oncontextmenu 리스너가 false를 리턴하면 컨텍스트 메뉴가 출력되는 디폴트 행동을 취소하여 소스 보기나 이미지 다운로드를 할 수 없게 된다.

document.oncontextmenu = function(){
...
return false;
}