e.pageX와 e.pageY는 브라우저상의 마우스 커서 위치를 실시간으로 계산해주는 구문이므로 주로 mousemove 이벤트와 같이 사용된다.
<style>
p {font-size:30px;}
</style>
<script>
$(document).ready(function(){
$(window).on("mousemove", function(e){
let x = e.pageX; // 브라우저상 마우스 커서의 x축 좌표를 x에 저장
let y = e.pageY;
$(".posX").text(x); // .posX에 변수 x 출력
$(".posY").text(y);
});
});
</script>
<p>X축 좌표 : <span class="posX"></span></p>
<p>Y축 좌표 : <span class="posY"></span></p>
여기서 중요한 점은 function()의 괄호 안에 'e'를 설정해야만 mousemove이벤트가 발생할 때마다 e.pageX로부터 실시간의 마우스 좌표 값을 받을 수 있다는 것이다.