>  기사  >  웹 프론트엔드  >  jQuery 마우스 이벤트란 무엇입니까?

jQuery 마우스 이벤트란 무엇입니까?

一个新手
一个新手원래의
2017-09-11 10:27:521832검색

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

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: 마우스 한 요소에서 다른 요소로 이동 요소가

 

mouseout 이벤트할 때 트리거됨: 마우스가 요소 밖으로 이동할 때 트리거됨

 $('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, hover event 

 $('p').hover(
    function(){},
    function(){}
  );

Example

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

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

 $('p').toggle(
    function(){},
    function(){}
  );

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

위 내용은 jQuery 마우스 이벤트란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.