JQuery Mouse Event

JQuery Mouse Event


■ 브라우저 위에서 마우스 이벤트가 발생하면 해당 이벤트 외에도 부가적인 정보가 발생하게 되는데요. 예를 들어 화면의 좌표값이나 이벤트가 발생한 시간, 마우스의 어느 버튼이 클릭됐는지 부가 정보로 확인할 수 있습니다. 그리고 이것들을 이용하면 좀 더 다양한 기능을 만들어낼 수 있습니다. 

 

■ 마우스의 클릭 이벤트 발생하는 부가적인 정보를 받기 위해서 이벤트를 연결할 때 실행되는 함수의 매개변수로 (event)를 받으면 되구요. 형식은 다음과 같습니다. 

 

 


$(document).on("clilck", "선택자", function(event){

실행되는 코드; 

});


■ 이렇게 부가적인 정보를 event 매개변수로 받으면 이 또한 객체이기 때문에 [event.부가정보] 형식으로 접근할 수 있고, 마우스 이벤트 때 발생하는 정보는 다음과 같습니다. 


1. timeStamp : 이벤트가 발생한 시간

2. pageX : X 좌표

3. pageY : Y 좌표

4. which : 오른쪽, 왼쪽 버튼 중 클릭된 버튼


'event.timeStamp' / 'event.pageX' 형식으로 접근해서 값을 얻어 올 수 있습니다.


 다음으로 알아볼 내용은 JQuery의 특징 중의 하나가 여러 개의 이벤트를 쉽게 연결할 수 있다는 점인데요. 그렇기 때문에 연결된 이벤트가 중복 실행되는 문제가 발생할 수 있습니다. 이런 중복 이벤트의 발생을 막는 방법은 두 가지가 있습니다.


1. 함수가 시작될 때 event.preventDefault(); 코드를 삽입하는 방법이 첫번째 이구요. 

2. 또 다른 하나는 함수의 끝 부분에 return false;코드를 넣어주면 되는데요. 


■ 편한 방법 아무거나 사용하시면 됩니다. 이렇게 해서 JQuery의 이벤트 실행할 때 함께 발생하는 부가정보를 event 매개변수로 받아서 사용하는 방법과, JQuery의 특성상 생길 수 있는 중복 이벤트를 막는 방법까지 알아봤습니다. 수고하셨어요. 

Leave a comment
Your name *
Your PassWord *
Comment *
COMMENT