e.pageX, e.pageY

Jiwontwopunch·2021년 12월 24일
0

독학

목록 보기
19/102
post-thumbnail

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로부터 실시간의 마우스 좌표 값을 받을 수 있다는 것이다.

0개의 댓글