[jQuery] 제이쿼리 마우스 이벤트

 

마우스 이벤트

사용자가 마우스를 이용해서 취하는 모든 행위

 

click() / dbclick()

 

$("이벤트 대상 선택").click(function() { 자바스크립트 코드; });

$("이벤트 대상 선택").on("click" , function() { 자바스크립트 코드; });

$("이벤트 대상 선택").dblclick(function() { 자바스크립트 코드; });

$("이벤트 대상 선택").on("dblclick" , function() { 자바스크립트 코드; });

---

<a>, <form> 태그에 클릭 이벤트 적용 시 기본 이벤트 차단

<a> 요소에 click, dblclick 등록 시 클릭할 떄마다 <a>에 링크된 주소로 이동하는 문제 발생

<form> 요소의 submit도 action에 등록된 주소로 이동시키는 문제 발생

 

1. return false를 이용한 차단

$("a or form").이벤트 메서드(function(){

      자바스크립트 코드;

      return false;

});

 

2.preventDefault() 메서드를 이용한 차단

$("a or form").이벤트 메서드(function(event){

     event.preventDefault();

     자바스크립트 코드;

});

---

mouseover() / mouseout() / hover()

mouseover() 이벤트 메서드는 선택한 요소에 마우스 포인터를 올릴 때마다 이벤트 발생

mouseout() 이벤트 메서드는 선택한 요소에서 마우스 포인터가 벗어날 때마다 이벤트 발생

hover() 이벤트 메서드는 선택한 요소에 마우스 포인터가 올라갈 때와 벗어날 때 각각 이벤트 발생

 

1. mouseover

$("이벤트 대상 선택").mouseover(function() { 자바스크립트 코드; });

$("이벤트 대상 선택").on("mouseover", function() { 자바스크립트 코드; });

 

2. mouseout

$("이벤트 대상 선택").mouseout(function() { 자바스크립트 코드; });

$("이벤트 대상 선택").on("mouseout", function() { 자바스크립트 코드; });

 

3. hover

$("이벤트 대상 선택").hover(

       function() { 마우스 오버 시 실행될 코드 },

       function() { 마우스 아웃 시 실행될 코드 }

};

 

 

---

mouseenter() / mouseleave()

mouseenter() 이벤트 메서드는 대상 요소의 경계 범위에 마우스 포인터가 들어오면 이벤트 발생

mouseleave() 이벤트 메서드는 대상 요소의 경계 범위에 마우스 포인터가 벗어나면 이벤트 발생

 

mouseover와 mouseout은 기준이 대상 요소이고  mouseenter와 mouseleave의 기준은 이벤트 대상이 포함된 범위이다.

 

$("이벤트 대상 선택").mouseenter(function() { 자바스크립트 코드; });

$("이벤트 대상 선택").on("mouseenter", function() { 자바스크립트 코드; });

$("이벤트 대상 선택").mouseleave(function() { 자바스크립트 코드; });

$("이벤트 대상 선택").on("mouseleave", function() { 자바스크립트 코드; });

---

mousemove()

mousemove() 이벤트 메서드를 통해 마우스 포인터의 좌표값을 알아낼 수 있다.

 

$("이벤트 대상 선택").mousemove(function() { 자바스크립트 코드; });

$("이벤트 대상 선택").on("mousemove", function() { 자바스크립트 코드; });

 

 

마우스 이벤트 객체의 속성

종류	설명
clientX	마우스 포인터의 X 좌푯값 반환 (스크롤 이동 거리 x)
clientY	마우스 포인터의 Y 좌푯값 반환 (스크롤 이동 거리 x)
pageX	마우스 포인터의 X 좌푯값 반환 (스크롤 이동 거리 o)
pageY	마우스 포인터의 Y 좌푯값 반환 (스크롤 이동 거리 o)
screenX	화면 모니터를 기준으로 마우스 포인터 X 좌푯값을 반환
screenY	화면 모니터를 기준으로 마우스 포인터 Y 좌푯값을 반환
layerX	position을 적용한 요소를 기준으로 마우스 포인터 X 좌푯값을 반환
layerY	position을 적용한 요소를 기준으로 마우스 포인터 Y 좌푯값을 반환
button	마우스 버튼의 종류에 따라 값을 반환 (왼쪽 0, 휠 1, 오른쪽 2)

---

scroll()

scroll() 이벤트 메서드는 대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생

 

$("이벤트 대상 선택").scroll(function() { 자바스크립트 코드; });

$("이벤트 대상 선택").on("scroll", function() { 자바스크립트 코드; });