[JS] 마우스 이벤트

:) 마우스 이벤트

마우스 이벤트에 대해서 알아보도록 하겠습니다.
마우스 이벤트는 마우스의 장치를 통해서만 생기는것이 아닌 핸드폰 테블릿 같은 다른 장치에서도 생깁니다.

이벤트 종류

mousedown / mouseup
요소 위에서 마우스 왼쪽 버튼을 누를 때, 누르고 있다가 뗄 때 발생합니다.

mouseover / mouseout
마우스 커서가 요소 바깥에 있다가 요소 안으로 움직일 때,
커서가 요소 위에 있다가 요소 밖으로 움직일 때 발생합니다.

mousemove
마우스를 움직일 때 발생합니다.

contextmenu
마우스 오른쪽 버튼을 눌렀을 때 발생합니다.

clientX,clientY 와 pageX, pageY

클라이언트 좌표: clientX 와 clientY
페이지 좌표: pageX 와 pageY

클라이언트 좌표(client)
웹문서를 기준으로 각각 왼쪽에서 얼마나 떨어져 있는지,
위에서 얼마나 떨어져 있는지를 나타내는데 페이지가 스크롤 되어도 변하지 않습니다.

페이지 좌표(page)
창 왼쪽 위를 기준으로 얼마나 떨어져 있는지를 나타내며 페이지를 스크롤 하면 값도 변합니다.