clientX, offsetX, pageX, screenX 차이

clientX, offsetX, pageX, screenX 의 차이

마우스 이벤트가 발생한 지점을 알기 위해 우리는 총 4가지 변수를 사용할 수 있다. clientX, clientY, offsetX, offsetY, pageX, pageY, screenX, screenY 으로 총 8가지 변수가 있는데, 이 변수들 간의 차이점은 무엇일까? 한 번 알아보자 :)

1. clientX, clientY

사용자에게 보여지는 브라우저 페이지를 기준으로 좌표로 표시한다. (스크롤바와 상관X)

• clientX : 브라우저 페이지를 기준으로 특정 지점의 x 좌표를 표시한다.
• clientY : 브라우저 페이지를 기준으로 특정 지점의 y 좌표를 표시한다.

2. offsetX, offsetY

요소 영역을 기준으로 좌표를 표시한다.

• offsetX : 요소를 기준으로 특정 지점의 x 좌표를 표시한다.
• offsetY : 요소를 기준으로 특정 지점의 y 좌표를 표시한다.

3. pageX, pageY

스크롤을 포함한 페이지를 기준으로 좌표를 표시한다.

• pageX : 페이지를 기준으로 특정 지점의 x 좌표를 표시한다.
• pageY : 페이지를 기준으로 특정 지점의 y 좌표를 표시한다.

4. screenX, screenY

모니터(스크린)을 기준으로 좌표를 표시한다.

• screenX : 스크린을 기준으로 특정 지점의 x 좌표를 표시한다.
• screenY : 스크린을 기준으로 특정 지점의 y 좌표를 표시한다.