MouseEvent 위치프로퍼티 정리

🖱 Event 위치프로퍼티 정리

안녕하세요 TriplexLab 입니다.

마우스 이벤트(MouseEvent) 객체에는 마우스 포인터의 위치와 관련된 다양한 프로퍼티들이 있는데요.
주로 아래와 같은 프로퍼티들이 자주 사용됩니다.

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

1️⃣ clientX, clientY

client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보를 담고있는데요.
클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역을 뜻합니다.

clientX : 브라우저가 표시하는 화면 내에서 마우스의 X좌표 위치를 담고 있습니다.
clientY : 브라우저가 표시하는 화면 내에서 마우스의 Y좌표 위치를 담고 있습니다.

client 값은 그 순간 보여지는 화면을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게
항상 보여지는 화면의 좌측 상단의 모서리 위치를 (0, 0)으로 계산합니다.

2️⃣ offsetX, offsetY

offset 프로퍼티는 이벤트가 발생한 target이 기준이 됩니다.

offsetX : 이벤트가 발생한 target 내에서 마우스의 X좌표 위치를 담고 있습니다.
offsetY : 이벤트가 발생한 target 내에서 마우스의 Y좌표 위치를 담고 있습니다.

offset값도 이벤트가 발생한 대상을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상
대상의 좌측 상단의 모서리 위치를 (0, 0)으로 계산합니다.

3️⃣ pageX, pageY

page 프로퍼티는 전체 문서를 기준으로 마우스 좌표 정보를 담고 있습니다.
그렇기 때문에 스크롤로 인해서 보이지 않게된 화면의 영역까지 포함해서 측정한다는 점이 앞의 두 프로퍼티와의 차이점 입니다.

pageX : 전체 문서 내에서 마우스의 X좌표 위치를 담고 있습니다.
pageY : 전체 문서 내에서 마우스의 Y좌표 위치를 담고 있습니다.

자칫 client 값과 혼동하기 쉬우니 잘 구분해 두시는 것이 좋습니다.

🎯 그림으로 정리하기

client, offset, page의 정리

---

🎯 getBoundingClientRect()

각종 좌표값이 들어있는 객체 입니다.

이것은 엘리먼트(target)의 크기와 위치를 알고 싶을 때는 getBoundingClientRect를 사용하면 됩니다.

엘리먼트의 기준으로 값을 가져오는것 이므로 아래처럼 css를 수정했다는 가정하고 말씀드립니다.

✍️ getBoundingClientRect의 코드

.element { /* 엘리먼트를 position으로 정렬을 했다는 가정하고, 말씀드립니다. */
    position: absolute; 
    top: 50%; 
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

<script>
    // IE는 getBoundingClientRect를 제공하지 않는다.
    var t = document.getElementById('target');
    console.log(t.getBoundingClientRect()); // 다음과 같은 다양한 프로퍼티들이 담겨져 있습니다.
    {
    	bottom:
    	height:
        left:
        right:
        top:
        width:
        x:
        y:
     }
    
 
    // 다음과 같은 방법도 있지만 일부변수값은 없네요.. (IE에서는 이 방법을 써야합니다.)
    console.log(t.offsetBottom);
    console.log(t.offsetHeight);
    console.log(t.offsetLeft);
    console.log(t.offsetRight);
    console.log(t.offsetTop);
    console.log(t.offsetWidth);
</script>

🎯 그림으로 정리하기

getBoundingClientRect 메소드 정리

🎯 offset 절대 위치 구하기

getBoundingClientRect()에 있는 값들은 상대값(스크롤 위치에따라 값이 변함)이라는것을 기억해야 합니다.

부모 요소중에 relative 스타일을 갖는다면 정확하지 않은 값을 가져올 수 있습니다.
즉, offset() 함수는 중간 컨텐츠들이 변수가 생기는 경우가 많을 때에는 정확하지 않은 값을 가져올 수 있습니다.

const offsetEle = document.querySelector('.con-box');
const offsetEleY = offsetEle.getBoundingClientRect().top;
const offsetEleAbsolTop = window.pageYOffset + offsetEleY;

스크롤로 이동한 거리(window.pageYOffset) + 현재화면 기준으로한 상대경로 값(offsetEleY)을 합한 값으로 절대(값이 변하지 않고 고정)값을 구할수 있습니다.