[Jquery] Jquery의 이벤트(Event) 관련 함수 - 2 (Mouse Events)


Study/Javascript, Jquery, CSS  2016. 3. 30. 01:31

안녕하세요. 명월입니다.


이번 포스트는 저번 포스트에 이어 Jquery의 Event에 대해서 공부하겠습니다.


링크 - [Jquery, CSS] Jquery의 이벤트(Event) 관련 함수 - 1 (Attachment)


Jquery Event - Jquery Api Document

함수 설명
.click() 마우스 클릭을 했을 때 반응하는 이벤트
.contextmenu() contextmenu가 나올 때 반응하는 이벤트(마우스 오른쪽 버튼을 누르면 메뉴입니다.)
.dbclick() 더블 클릭을 하면 반응하는 이벤트
.hover() 마우스를 올렸을 때 반응하는 이벤트
.mousedown() 마우스 버튼을 눌렀을 때 반응하는 이벤트(왼쪽, 오른쪽 전부)
.mouseenter() 영역에 마우스가 들어갔을 때 반응하는 이벤트
.mouseleave() 영역에 마우스가 빠져나갈 때 반응하는 이벤트
.mousemove() 영역위에서 마우스가 움직일 때 반응하는 이벤트
.mouseout() 마우스가 영역에서 벗어날 떄 반응하는 이벤트
.mouseover() 마우스가 영역 위에 있을 때 반응하는 이벤트
.mouseup() 마우스 버튼이 클릭 후 올라갈 때 반응하는 이벤트
.toggle() 클릭를 할 때마다 두 처리기에 번갈아가며 반응하는 이벤트(1.8 이후에는 없어진 함수네요)

마우스 이벤트에서 자주 사용하는 함수는 .click(), .dblclick(), .hover()가 가장 많이 사용하지 않을까 싶네요.

그 외에 .mouseover()와 .mouseenter(), 그리고 .mouseleave()와 .mouseout()의 차이가 헷갈리기 쉬운 이벤트이네요..

실제 예제로 차이를 확인해 보겠습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
 </HEAD>
 <BODY>
  <div style="max-width:520px;height:300px;overflow:auto;">
    <button id="ExamBtn">click</button>
    <div id="Exam1" style="height:30px;width:300px;border:1px solid #000;padding:30px;">
      <span style="width:100%;height:100%;border:1px solid #000;display:block"> </span>
    </div><br />
    <div id="Exam2" style="height:30px;width:300px;border:1px solid #000;padding:30px;">
      <span style="width:100%;height:100%;border:1px solid #000;display:block"> </span>
    </div>
    <span id="indexChecker" ><span>
    <script>
      //버튼 클릭하면 위 DIV에 click 메시지를 남긴다.
      $("button#ExamBtn").click(function(){
        $("div#Exam1 > span").html("click");
      });
      //버튼을 더블 클릭하면 위 DIV에 double click 메시지를 남긴다.
      $("button#ExamBtn").dblclick(function(){
        $("div#Exam1 > span").html("double click");
      });
      //마우스버튼을 누르면 아래 DIV에 mouse down 메시지를 남긴다.
      $("button#ExamBtn").mousedown(function(){
        $("div#Exam2 > span").html("mouse down!");
      });
      //마우스버튼에서 손을 떼면 아래 DIV에 mouse up 메시지를 남긴다.
      $("button#ExamBtn").mouseup(function(){
        $("div#Exam2 > span").html("mouse up!");
      });
      //위 DIV안에서 오른쪽 마우스(contextmenu)를 오픈하면 메시지를 남긴다.
      $("div#Exam1").contextmenu(function(){
        $("div#Exam2 > span").html("contextmenu");
      });
      //아래 DIV안에서 오른쪽 마우스(contextmenu)를 오픈하면 메시지를 남긴다.
      $("div#Exam2").contextmenu(function(){
        $("div#Exam1 > span").html("contextmenu");
      });
      //위 DIV안으로 hover하면 바탕색을 바꾼다.
      $("div#Exam1").hover(function(){
        //안으로 들어갈때
        $(this).css("background-color","yellow");
        $("div#Exam1 > span").html("hover");
      },function(){
        //hover를 빠져나갈때
        $(this).css("background-color","white");
        $("div#Exam1 > span").html(" ");
      });
      var index = 0;
      //위 DIV에 마우스가 들어갈때
      $("div#Exam1").mouseenter(function(){
        index++;
      });
      //위 DIV에 마우스가 빠져나올때
      $("div#Exam1").mouseleave(function(){
        index++;
      });
      //마우스가 움직일때
      $("div#Exam1").mousemove(function(e){
        $("div#Exam1 > span").html("x point"+e.pageX+"y point"+e.pageY);
      });
      $("div#Exam2").mousemove(function(e){
        $("div#Exam2 > span").html("x point"+e.clientX+"y point"+e.clientY);
      });
      //마우스가 DIV위에 있을때
      $("div#Exam2").mouseover(function(){
        index++;
      });
      //마우스가 DIV를 떠날때
      $("div#Exam2").mouseout(function(){
        index++;
      });
      //쓰레드
      timerFnc = function(){
        $("span#indexChecker").html(index);
        setTimeout(timerFnc,100);
      };
      timerFnc();
    </script>
  </div>
 </BODY>
</HTML>
 

 

전체적으로 위 소스를 보면서 테스트를 해보면 되나 mouseover와 mouseenter의 차이에 대해 설명하겠습니다. 위 예제를 보시면 mouseenter는 마우스가 위 DIV박스에 들어가고 안의 SPAN박스까지 들어가도 맨 아래 숫자가 변하지 않습니다.

그러나 밑의 DIV박스는 마우스가 들어갈 때 맨 아래의 수가 변하지만 SPAN으로 들어갈때도 수가 변합니다. 이는 마우스가 DIV에서 SPAN으로 이동할 때는 마우스가 DIV위에 있지 않다고 생각하기 때문입니다. SPAN에 빠져날가때 다시 숫자가 증가하네요.

이런 차이가 있습니다. mouseenter와 mouseleaver는 짝지어 다니고, mouseover와 mouseout은 같이 다니는 함수입니다.