[JavaScript] 마우스 이벤트

1. MouseEvent.button

마우스 이벤트 객체의 버튼 프로퍼티를 활용하면, 어떤 버튼을 눌러서 일어난 이벤트 인지 확인 가능

마우스 버튼을 눌렀을 때 일어난 이벤트에 대해서 어떤 버튼을 눌러서 일어난 이벤

값	내용
0	마우스 왼쪽 버튼
1	마우스 휠
2	마우스 오른쪽 버튼
3	X1 (일반적으로 브라우저 뒤로 가기 버튼)
4	X2 (일반적으로 브라우저 앞으로 가기 버튼)

mouseenter, mouseleave, mouseover, mouseout, mousemove 처럼 마우스 이동과 관련된 이벤트는 값이 null 이나 undefined가 아니라 0임.

---

2.MouseEvent.type

 

이벤트 타입	설명
mousedown	마우스 버튼을 누르는 순간
mouseup	마우스 버튼을 눌렀다 떼는 순간
click	왼쪽 버튼을 클릭한 순간
dblclick	왼쪽 버튼을 빠르게 두 번 클릭한 순간
contextmenu	오른쪽 버튼을 클릭한 순간
mousemove	마우스를 움직이는 순간
mouseover	마우스 포인터가 요소 위로 올라온 순간
mouseout	마우스 포인터가 요소에서 벗어나는 순간
mouseenter	마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음)
mouseleave	마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음)

---

3. MouseEvent.위치프로퍼티

 

프로퍼티	설명
clientX, clientY	마우스 포인터의 브라우저 표시 영역에서의 위치
pageX, pageY	마우스 커서의 문서 영역에서의 위치
offsetX, offsetY	마우스 포인터의 이벤트 발생한 요소에서의 위치
screenX, screenY	마우스 포인터의 모니터 화면 영역에서의 위치

---

 

4. MouseEvent.relatedTarget

 

target: 이벤트가 발생한 요소

relatedTarget: 이벤트가 발생하기 직전에 마우스가 위치한 요소