JQuery 마우스 클릭 이벤트 연결

JQuery 마우스 클릭 이벤트 연결

지난 글에서 마우스의 클릭 이벤트에 대해서 동적 연결, 정적 연결하는 과정을 알아봤었는데요. 이번 글에서는 JQuery에서 사용되는 마우스 이벤트 목록을 정리하고 클릭 이벤트의 동적 연결 방법에 대해서 자세히 알아보겠습니다.

 

 마우스 이벤트는 다음과 같습니다. 

click : 클릭했을 때

dblclick : 더블클릭 했을 때

mousemove : 포인터가 움직일 때

mouseover : 포인터가 태그 위에 올라가 있을 때

mousedown : 버튼 클릭했을 때

mouseup : 버튼을 놓을 때

 

 

mouseout : 포인터가 태그에서 나갈 때 (내부에 있는 다른 태그로 이동해도 나간 걸로 인식)

mouseleave : mouseout과 같은 기능(내부에 있는 다른 태그로 이동해도 나간 걸로 인식하지 않음)

mouseenter : 마우스 포인터가 태그로 들어가는 순간

contextmenu : 오른쪽 마우스 클릭

tap : click 이벤트와 같음 (모바일에서 적용)

■ 대충 보셔도 단어의 뜻과 비슷한 내용의 이벤트인 걸 알 수 있을 겁니다. 클릭 이벤트를 동적 연결하는 과정은 다음과 같습니다. 

$(document).on(이벤트, 선택자, 함수);

■ 클릭 이벤트를 연결할 때는 보통 pc와 모바일(터치)에서 모두 인식할 수 있도록 'click'과 'tap'을 동시에 사용하는데요. 

$(document).on("click tap", "선택자", 함수(){});

■ 이렇게 click과 tap을 동시에 사용하면... 어떤 걸 사용하는 브라우저든 모두 정삭 작동되기는 하는데요. 문제는 이 둘을 동시에 인식해서 중복 실행하는 브라우저가 있을 수 있습니다. 그렇기 때문에 다음과 같이 return false;를 사용하면 중복 실행되지 않게 됩니다. 

$(document).on("click tap", "선택자", function(){

//실행할 함수의 내용;

return false;

}); 

 이렇게 해서 JQuery의 마우스 이벤트 중에서 클릭 이벤트에 대해서 알아봤습니다. 수고하셨어요.