JavaScript coordinate

종류

1. clientX : 사용자에게 보여지는 브라우저 화면 좌측 상단 기준으로 event 발생한 위치 좌표 (x), 스크롤 상관 있다

2. clientY : 사용자에게 보여지는 브라우저 화면 좌측 상단 기준으로 event 발생한 위치 좌표 (y), 스크롤 상관 있다

3. pageX : 전체 문서 좌측 상단 기준으로 event 발생한 위치 좌표 (x), 스크롤 상관 없다

4. pageY : 전체 문서 좌측 상단 기준으로 event 발생한 위치 좌표 (y), 스크롤 상관 없다

5. offsetX : 이벤트 걸려있는 DOM node 기준으로 event 발생한 위치 좌표 (x), 상대적

6. offsetY : 이벤트 걸려있는 DOM node 기준으로 event 발생한 위치 좌표 (y), 상대적

7. screenX : 사용자 모니터 좌측 상단 기준으로 event 발생한 위치 좌표 (x)

8. screenY : 사용자 모니터 좌측 상단 기준으로 event 발생한 위치 좌표 (y)

😄 code 1. addEventListener('click')

// class 이름이 target인 요소를 변수 click에 저장 
const click = document.querySelector('.target');
// click 이벤트 핸들러 등록
click.addEventListener('click', (event) => {
	// clientX, clientY
    console.log(`clientX : ${event.clientX}, clientY : ${event.clientY}`);
  	// pageX, pageY
    console.log(`pageX : ${event.pageX}, pageY : ${event.pageY}`);
  	// screenX, screenY
    console.log(`screenX : ${event.screenX}, screenY : ${event.screenY}`);
  	// offsetX, offsetY
    console.log(`offsetX : ${event.offsetX}, offsetY : ${event.offsetY}`);
});

addEventListener('click')

• click 이벤트 핸들러 등록하기
  
  

offset 사용시 주의사항

• relative한 가장 가까운 부모 요소를 기준으로 한다. 즉 부모요소중 relative가 없다면 최상위가 기준이 되지만 부모요소중 한개라도 relative가 있다면 기준이 달라져서 원하지 않는 값이 전달될수도 있다.

😄 code 2. pageXOffset, pageYOffset

// 현재 브라우저에서 x축으로 얼마나 스크롤했는지 확인하기
// 초기값 0
const pageXOffset = window.pageXOffset;
// 현재 브라우저에서 y축으로 얼마나 스크롤했는지 확인하기
// 초기값 0
const pageYOffset = window.pageYOffset;

😄 code 3. getBoundingClientRect()

// viewport 기준으로 특정요소 좌표 구하기
// id가 element인 요소를 받아와서 target에 저장
const target = document.getElementById('element');
// 브라우저 상단에서 element가(상단 모서리) 얼만큼 떨어져있는지, y축과 동일
const targetTop = target.getBoundingClientRect().top
// 브라우저 상단에서 element가(하단 모서리) 얼만큼 떨어져있는지
const targetBottom = target.getBoundingClientRect().bottom;
// 브라우저 좌측에서 element가(좌측 모서리) 얼만큼 떨어져있는지, x축과 동일
const targetLeft = target.getBoundingClientRect().left;
// 브라우저 좌측에서 element가(우측 모서리) 얼만큼 떨어져있는지
const targetRight = target.getBoundingClientRect().right;

주의사항

• CSS에서 right은 브라우저 우측 기준으로 element가 얼마나 떨어져있는지 확인
• CSS에서 bottom은 브라우저 하단 기준으로 element가 얼마나 떨어져있는지 확인

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍