Événements de la souris dans jQuery
Cet article explique les différents événements de la souris qui se produisent en fonction de la position ou des actions de la souris sur un élément HTML particulier.
La méthode click()
La méthode jQuery click() attache une fonction de gestion d'événement aux éléments sélectionnés pour l'événement "click". La fonction attachée est exécutée lorsque l'utilisateur clique sur cet élément. L'exemple suivant permet de masquer les éléments <p> d'une page lorsqu'ils sont cliqués.
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exécution d'une fonction sur un événement de clic en jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 20px;
font: 20px sans-serif;
background: beige;
}
</style>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>
</head>
<body>
<p>Si tu cliques sur moi, je disparais.</p>
<p>Si tu cliques sur moi, je disparais.</p>
</body>
</html>
Dans cet exemple nous avons utilisé une fonction qui fait disparaitre les paragraphe lorsqu'on clique dessus en se servont de la méthode slidup() pour en savoir plus sur cette méthode voir notre tutoriel :Les effets jQuery :Masquer, afficher, basculer, diapositive, estomper et animer.
Remarque : Le mot-clé this dans la fonction de gestion d'événement de jQuery est une référence à l'élément dans lequel l'événement est en train de se produire.
La méthode dblclick()
>La méthode jQuery dblclick() relie une fonction de gestion d'événement aux éléments sélectionnés pour l'événement "dblclick". La fonction liée est exécutée lorsque l'utilisateur double-clique sur cet élément. L'exemple suivant permet de masquer les éléments <p> après un double clic.
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exécution d'une fonction sur un événement de double-clic en jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 20px;
font: 20px sans-serif;
background: beige;
}
</style>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>
</head>
<body>
<p>Si tu Double-clique sur moi, je disparais.</p>
<p>Si tu Double-clique sur moi, je disparais.</p>
</body>
</html>
La méthode hover()
La méthode jQuery hover() associe aux éléments sélectionnés une ou deux fonctions de gestion d'événements qui sont exécutées lorsque le pointeur de la souris entre et sort des éléments. La première fonction est exécutée lorsque l'utilisateur place le pointeur de la souris sur un élément, tandis que la deuxième fonction est exécutée lorsque l'utilisateur retire le pointeur de la souris de cet élément.
L'exemple suivant mettra en évidence
éléments lorsque vous placez le curseur dessus, la mise en évidence sera supprimée lorsque vous retirez le curseur.
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exécution d'une fonction sur un événement de survol en jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 20px;
font: 20px sans-serif;
background: #00f2f2;
}
p.lumiereVive{
background: yellow;
}
</style>
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("lumiereVive");
}, function(){
$(this).removeClass("lumiereVive");
});
});
</script>
</head>
<body>
<p>Placez le pointeur de la souris sur moi.</p>
<p>Placez le pointeur de la souris sur moi.</p>
</body>
</html>
Remarque : on peut considérer que la méthode hover() est une combinaison des méthodes jQuery mouseenter() et mouseleave().
jQuery événements : mouseenter et mouseleave
L'événement mouseenter se produit lorsque la souris est placée sur l'élément HTML et l'événement mouseleave se produit lorsque la souris est retirée de l'élément.
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exécution d'une fonction sur un événement de survol en jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#key{width:200px}
</style>
</head>
<body>
<p id="exemple">Texte d'Origine </p>
<script>
$("document").ready(function () {
$("#exemple").mouseenter(enter);
$("#exemple").mouseleave(leave);
function enter() {
$("#exemple").text("L'événement mouseenter a eu lieu, donc la souris est sur l'élément p");
$("#exemple").css("background-color","yellow");
$("#exemple").css("color","#000000");
}
function leave() {
$("#exemple").text("L'événement mouseleave s'est produit, donc la souris à quitté l'élément p");
$("#exemple").css("background","red");
$("#exemple").css("color","#ffffff");
}
});
</script>
</body>
</html>
Dans l'exemple ci-dessus on chage le contenu de l'élément p est le css losque la souris est sur l'élément ou l'a quitté
Les événements MouseUp et MouseDown
Le mouseup et le mousedown nécessitent un clic de souris pour se produire.
L’événement mouseDown se produit en appuyant sur le bouton (gauche ou droit) de la souris.
L’événement mouseUp quant à lui il se produit lorsqu’on relâche le bouton de la souris.
Donc un événement click de la souris produit toujours les deux événements
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exécution d'une fonction sur un événement click de la souris en jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#key{width:200px}
</style>
</head>
<body>
<p id="exemple">Text d'origine</p>
</body>
<script>
$("document").ready(function()
{
$("#exemple").mouseup(relacher);
$("#exemple").mousedown(appuyer);
function relacher()
{
$("#exemple").text("L'événement mousedown s'est produit, donc la souris est sur l'élément p avec le bouton relaché");
$("#exemple").css("background-color","yellow");
$("#exemple").css("color","#000000");
}
function appuyer()
{
$("#exemple").text("L'événement mouseup a eu lieu, la souris est sur l'élément p avec le bouton appuyé");
$("#exemple").css("background","red");
$("#exemple").css("color","#ffffff");
}
});
</script>
</body>
</html>
les événements mouseover et mouseout en jQuery
Ces événements se produisent lorsque la souris est placée sur un élément HTML spécifique.
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exécution d'une fonction sur un événement de survol de lma souris en jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#key{width:200px}
</style>
</head>
<body>
<p id="exemple">Texte d'Origine </p>
<script>
$("document").ready(function () {
$("#exemple").mouseover(enter);
$("#exemple").mouseout(leave);
function enter() {
$("#exemple").text("L'événement mouseover a eu lieu, donc la souris survole l'élément p");
$("#exemple").css("background-color","yellow");
$("#exemple").css("color","#000000");
}
function leave() {
$("#exemple").text("L'événement mouseout s'est produit, donc la souris quitte l'élément p");
$("#exemple").css("background","red");
$("#exemple").css("color","#ffffff");
}
});
</script>
</body>
</html>
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
