clientX, layerX, offsetX, pageX, x - 마우스 이벤트 객체의 좌표 속성

clientX, layerX, offsetX, pageX, x는 모두 마우스 이벤트 객체에 포함된 좌표 관련 속성입니다. 콘솔에서 확인해 보면, 같거나 비슷한 값이 나옵니다. 이들은 사용 환경이나 특정 요소를 기준으로 좌표값을 제공하는데,  각 속성의 차이를 비교해보겠습니다.

1. clientX

• 뷰포트를 기준으로 마우스 위치의 X 좌표를 제공합니다.
• 브라우저 창의 왼쪽 위를 (0, 0)으로 간주하며, 스크롤을 포함하지 않습니다.
• 화면 상에서 요소가 뷰포트 내 어디에 위치하는지 파악할 때 유용합니다.

document.addEventListener('mousemove', (event) => {
    console.log(event.clientX); // 뷰포트 기준 X 좌표
});

2. layerX

• 현재 요소 기준으로 마우스 위치의 X 좌표를 반환합니다. (상위 요소에 포함된 요소의 경우 부모 요소를 기준으로 계산됩니다)
• offsetX와 유사하지만, 브라우저별 구현 차이로 비표준으로 간주되며, 교차 브라우저 호환성이 떨어질 수 있습니다.
• 현재 요소가 아니라 조상 요소를 기준으로 계산될 수 있어 정확한 위치가 필요할 때는 주의가 필요합니다.

element.addEventListener('mousemove', (event) => {
    console.log(event.layerX); // 요소 기준 X 좌표
});

3. offsetX

• 이벤트가 발생한 요소 기준으로 마우스 위치의 X 좌표를 반환합니다.
• 이벤트가 발생한 요소의 왼쪽 위를 (0, 0)으로 하여 X 좌표를 계산합니다. 가장 많이 사용되며 교차 브라우저 호환성도 좋습니다.

element.addEventListener('mousemove', (event) => {
    console.log(event.offsetX); // 요소 기준 X 좌표
});

4. pageX

• 페이지 전체(문서)에서의 X 좌표를 제공합니다.
• 스크롤 위치를 포함하므로, 페이지가 스크롤되어도 그 스크롤 값을 반영하여 X 좌표를 계산합니다.
• 페이지 스크롤이 반영된 위치를 파악할 때 유용합니다.

document.addEventListener('mousemove', (event) => {
    console.log(event.pageX); // 페이지 전체 기준 X 좌표 (스크롤 포함)
});

5. x

• clientX와 동일하게 뷰포트 기준의 X 좌표를 제공합니다.
• x는 clientX의 별칭으로 clientX와 동일한 값을 반환합니다.

document.addEventListener('mousemove', (event) => {
    console.log(event.x); // clientX와 동일한 X 좌표
});