jQuery -마우스 이벤트

마우스에 의해 발생한 이벤트는 다음 표를 아용할 수 있습니다.

이벤트	설 명
.mouseover()	요소 위에 마우스를 올렸을 때 (이벤트 버블링이 이루어짐)
.mouseenter()	요소 위에 마우스를 올렸을 때 (이벤트 버블링되지 않음)
.mousedown()	마우스로 누르고 있을 떄
.mouseup()	누르고 있는 마우스를 땔 때
.mousemove()	요소 위에 있는 동안 마우스가 이동할 때
.mouseout()	요소 위에서 마우스가 벗어났을 때 (이벤트 버블링이 이루어짐)
.mouseleave()	요소 위에서 마우스가 벗어났을 때 (이벤트 버블링되지 않음)
.hover()	.mouseenter() 와 .mouseleave() 를 동시에 처리 (각각 이벤트가 동시에 발생함)
.click()	마우스로 한 번 클릭했을 때
.dblclick()	마우스로 더블 클릭했을 때
.contextmenu()	오른쪽 마우스 버튼을 누를 때

.mouseover()

요소 위에 마우스를 올려 보세요. 이벤트가 발생합니다.

<script>
$(function(){
 var mouse = $("#on");
 mouse.mouseover(function(){
   alert("마우스를 올렸습니다.");
 });
});
</script>

<div id="on">하보니  PHP</div>

.mousedown(), .mouseup()

마우스로 요소를 누르고 있을 때와 누르고 있던 마우스를 땔 때 글자 색상이 변합니다.

<script>
$(function(){
 var mouse = $("#on");
 
 // 마우스로 누르고 있을 때
 mouse.mousedown(function(){
   $(this).css("color", "red");
 });
 
 // 누르고 있던 마우스를 땔 때
 mouse.mouseup(function(){
   $(this).css("color", "blue");
 });
});
</script>

<div id="on">하보니  PHP</div>

.mousemove(), .mouseout()

요소 위에 마우스를 올렸을 때와 마우스가 벗어날 때 배경 색상이 변합니다.

<style>
  #on {
    width: 100px;
    height: 100px;
    background: #ccc;
    color: #FFF;
  }
</style>

<script>
$(function(){
 var mouse = $("#on");
 
 mouse.mousemove(function(){
   $(this).css("background", "blue");
 });

 mouse.mouseout(function(){
   $(this).css("background", "red");
 });
});
</script>

<div id="on">하보니  PHP</div>

.hover()

.hover() 를 이용하면 .mouseenter() 와 .mouseleave() 를 동시에 처리할 수 있으며 이벤트 버블링이 되지 않습니다.

먼저, 두 개의 함수를 정의하는데, 첫 번째 함수는 마우스를 올렸을 때이고, 두 번째 정의한 함수는 마우스를 내렸을 때 이벤트가 발생합니다.

<style>
  #on {
    width: 100px;
    height: 100px;
    background: #ccc;
    color: #FFF;
  }
</style>

<script>
$(function(){
 var mouse = $("#on");
 
 mouse.hover(
   // 마우스를 올렸을 때
   function(){
     $(this).css("background", "blue");
   },
   
   // 마우스를 내렸을 때
   function(){
     $(this).css("background", "red");
   }
 );
});
</script>

<div id="on">하보니  PHP</div>