jQuery 마우스 포인터 위치 구하기

jQuery를 통해서 마우스 포인터 위치를 구하는 소스코드입니다.

$(document).ready(function(){

      $(document).mousemove(function(e){

/*

      e.pageX : x좌표

                      e.pageY : y좌표

*/

});

});

위와 같은 소스코드를 통해서 마우스 포인터의 위치를 구할 수 있습니다. jQuery 객체 중에서 event 객체의 속성값을 통해서 마우스 포인터의 위치값을 알아낼 수 있습니다.

function(e) <- 이라고 되어있는 문장에서 e가 jQuery의 event 객체를 얻어오기 위한 매개변수입니다. document 객체의 마우스 move 이벤트가 발생했을 때 해당 이벤트 객체가 e에 전달이 되고, 이 e의 속성중에서 pageX와 pageY라는 속성으로 위치값을 얻어내는 것 입니다.

- e.pageX : x 좌표값

- e.pageY : y 좌표값

자세한 내용은 아래 사이트를 참고하기 바랍니다.

pageX : http://api.jquery.com/event.pageX/

pageY : http://api.jquery.com/event.pageY/

그 밖에도 event 객체에는 여러 가지 속성이 있습니다.

- target : 이벤트가 발생된 대상 객체에 접근하는 속성

- result : 이벤트 처리함수가 반환된 결과값을 접근하는 속성

- timestamp : 이벤트가 발생된 시점에 대한 정보를 가지고 있는 속성

- type : 이벤트의 종류에 대한 정보를 가지고 있는 속성

위에 열거한 속성들 외에도 더 많은 속성과 메소드가 있습니다. 아래 사이트에서 확인하실 수 있습니다.

jQuery의 Event 객체 : http://api.jquery.com/category/events/event-object/

영어가 있다고 두려워하는 것 보다는 정확한 해석이 되지 않더라도 모르는 단어를 찾아가며 내용을 살펴보시는 것이 좋습니다. 블로그에 기재된 내용은 필요한 내용만 추려서 간단하게 작성하여 올린 것이기 때문에 더 깊게, 더 정확하게 알고자 할때는 원문을 읽어보시는 것이 가장 좋기 때문입니다.