événement de souris jQuery summary_jquery

Les événements de souris sont déclenchés lorsque l'utilisateur déplace le curseur de la souris ou clique avec n'importe quel bouton de la souris.

1. Événement de clic  : Déclenché lorsque le bouton gauche de la souris est cliqué

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

Exemple :

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

2. événement dbclick  : déclenché lorsque deux clics sont effectués en succession rapide

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

Exemple :

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

3. événement mousedown  : déclenché lorsque la souris est enfoncée

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

Exemple

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

4. événement mouseup : déclenché lorsque la souris est relâchée

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

Exemple :

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

5. événement mouseover : déclenché lorsque la souris passe d'un élément à un autre

　événement mouseout : déclenché lorsque la souris sort d'un élément

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

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

Exemple :

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

6. événement mouseenter  : déclenché lorsque la souris entre dans un élément

événement mouseleave : déclenché lorsque la souris sort d'un élément

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

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

Exemple

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

7. Événement de survol

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

Exemple

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

); 

8. événement de basculement  : événement de changement de clic de souris

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

Exemple

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