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현재 요소 기준으로 마..
JavaScript
2024. 10. 30. 19:24
