jQuery 마우스 이벤트 summary_jquery

마우스 이벤트는 사용자가 마우스 커서를 움직이거나 마우스 버튼을 클릭할 때 발생합니다.

1. 클릭 이벤트 : 마우스 왼쪽 버튼을 클릭했을 때 발생

　$('p').click(function(){});

예:

$('p').click(function(){
        alert('click function is running !');
       });

2. dbclick 이벤트 : 빠르게 두 번 클릭했을 때 발생

　$('p').dbclick(function(){});

예:

$("button").dblclick(function(){
 $("p").slideToggle();
});

3. mousedown 이벤트 : 마우스를 눌렀을 때 발생

　$('p').mousedown(function(){});

예

$("button").mousedown(function(){
 $("p").slideToggle();
});

4. mouseup 이벤트 : 마우스를 놓을 때 발생

　$('p').mouseup(function(){});

예:

$("button").mouseup(function(){
 $("p").slideToggle();
});

5. 마우스오버 이벤트 : 마우스가 한 요소에서 다른 요소로 이동할 때 발생

　마우스아웃 이벤트: 마우스가 요소 밖으로 이동할 때 발생

　$('p').mouseover(function(){});

$('p').mouseout(function(){});

예:

$("p").mouseover(function(){
 $("p").css("background-color","yellow");
});
$("p").mouseout(function(){
 $("p").css("background-color","#E9E9E4");
});

6. mouseenter 이벤트 : 마우스가 요소 안으로 이동할 때 발생

mouseleave 이벤트: 마우스가 요소 밖으로 이동할 때 트리거됩니다

　$('p').mouseenter(function(){});

$('p').mouseleave(function(){});

예

$("p").mouseenter(function(){
 $("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
 $("p").css("background-color","#E9E9E4");
});

7. 호버 이벤트

　$('p').hover(
함수(){},
함수(){}
);

예

$(".table_list tr").hover( 
function () { 
$(this).addClass("hover"); 
}, 
function () { 
$(this).removeClass("hover"); 
} 

); 

8. 토글 이벤트 : 마우스 클릭 전환 이벤트

　$('p').toggle(
함수(){},
함수(){}
);

예

$("p").toggle(
 function(){
 $("body").css("background-color","green");},
 function(){
 $("body").css("background-color","red");},
 function(){
 $("body").css("background-color","yellow");}
);