Les événements de souris en jQuery

Sommaire

1- Objectifs
2- Définitions
3- L’écoute sur la souris
4- Quelques méthodes
4.1- Méthode click()
4.2- Méthode dblclick()
4.3- Méthode hover()
5- Application
5.1.1- Sommaire du cours jQuery

Les événements de souris en jQuery

Objectifs

Connaitre les événements en jQuery en jQuery.
Savoir utiliser les événements en jQuery en jQuery.

Définitions

Comme son nom l’indique, c’est quelque-chose, une action plus précisément, qui survient à la suite d’un déclencheur spécifique.
Il s’agit d’une action utilisateur, lorsque vous cliquez sur un bouton pour ouvrir ou fermer une fenêtre, vous déclencher un événement, qui en fonction de conditions requises, va exécuter le code chargé de réaliser l’action que vous avez demandée.
En JQuery, la première action que vous réalisez systématiquement est en elle-même un événement.

$(document).ready(function(){ // Le code jQuery ici ! });

L’écoute sur la souris

La souris d’un ordinateur est un outil qui permet à l’utilisateur de réaliser de multiples actions : cliquer, bouger, double-cliquer, descendre dans une page…
Liste d’événements adaptés à la souris.

Fonction	Action
click()	Clic
dblclick()	Double-clic
hover()	Passage de la souris
mouseenter()	Rentrer dans un élément
mouseleave()	Quitter un élément
mousedown()	Presser un bouton de la souris
mouseup()	Relâcher un bouton de la souris
scroll()	Scroller (utiliser la roulette)

Quelques méthodes

Méthode click()

Présentation

La méthode click () de jQuery est le moyen simple et rapide d’ajouter un écouteur de clic à un élément HTML unique ou au groupe d’éléments HTML.
Vous sélectionnerez quelque chose comme par id, class ou balise, puis nous exécuterons la méthode click () sur celle-ci et, entre parenthèses de la méthode click (), nous transmettrons la fonction de rappel.

Syntaxe

$ (“SelectElement”). Click (function () { // Lignes de code });

Exemple (Cliquer pour afficher)

Un clic sur le bouton change la couleur de la page

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Exemple méthode click</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){

$("#btnClick").click(function(){
  $("body").css("background", "#9cf");
});

});
</script>
</head>
<body>
<h1>Le jQuery</h1>
 <ol>
<li>Le <span>jQuery</span> est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l’écriture de scripts côté client dans le code HTML.</li>
<li><span>jQuery</span> est une bibliothèque de fonctions en JavaScript. C’est une librairie légère : « écrire moins, faire plus »</li>
<li>C’est une bibliothèque javascript open-source et multibrowser.</li>
<li>Elle permet de parcourir et de manipuler très facilement le DOM des pages Web avec la syntaxe fortement similaire à celle d’XPath.</li>
<li>JQuery permet par exemple de changer / ajouter une classe CSS, créer des animations, modifier des attributs, etc.</li>
 </ol>
<button id="btnClick">Changer la couleur de la page </button>
</body>
</html>

Méthode dblclick()

Présentation

Il est déclenché lorsque l’utilisateur appuie et relâche rapidement la souris deux fois de suite
La méthode jQuery de dblclick () est utilisée pour lier un gestionnaire d’événements à l’ événement JavaScript dblclick ou pour déclencher cet événement sur un élément.
Se produit lorsqu’un élément est double-cliqué.

Syntaxe

$ ("selector").dblclick(function() { // Lignes de code });

Exemple (Cliquer deux fois pour afficher)

Un double clic sur le bouton change la couleur de la page

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Exemple méthode dblclick</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
 
$("#btnClick").dblclick(function(){
  $("body").css("background", "#9cf");
});
 
});
</script>
</head>
<body>
<h1>Le jQuery</h1>
 <ol>
<li>Le <span>jQuery</span> est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l’écriture de scripts côté client dans le code HTML.</li>
<li><span>jQuery</span> est une bibliothèque de fonctions en JavaScript. C’est une librairie légère : « écrire moins, faire plus »</li>
<li>C’est une bibliothèque javascript open-source et multibrowser.</li>
<li>Elle permet de parcourir et de manipuler très facilement le DOM des pages Web avec la syntaxe fortement similaire à celle d’XPath.</li>
<li>JQuery permet par exemple de changer / ajouter une classe CSS, créer des animations, modifier des attributs, etc.</li>
 </ol>
<button id="btnClick">Changer la couleur de la page </button>
</body>
</html>

Méthode hover()

Présentation

La méthode hover () est propre à jQuery reprend les événements onmouseover et onmouseout du JavaScript ou mouseover et mouseout de jQuery, soit lorsque le curseur survole un élément et quitte celuici.
La méthode hover() de jQuery lie deux événements fréquemment utilisés à l’élément sélectionné ; l’un lorsque le pointeur survole et l’autre lorsqu’il le quitte.
Cette méthode s’effectue donc en deux temps. Quand le curseur se situe au dessus d’un élément déterminé, la première fonction passée en paramètre est exécutée. Lorsque le curseur sort du cadre de l’élément, la seconde fonction est exécutée.

Syntaxe

$ (selector.hover( over, out ) { // Lignes de code });

Exemple (Passer la souris pour afficher)

Le passage de la souris sur le bouton change la couleur de la page

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Exemple méthode hover</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
 
$("#btnClick").hover(function(){
  $("body").css("background", "#9cf");},
 function(){
  $("body").css("background", "#999");
});
 
});
</script>
</head>
<body>
<h1>Le jQuery</h1>
 <ol>
<li>Le <span>jQuery</span> est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l’écriture de scripts côté client dans le code HTML.</li>
<li><span>jQuery</span> est une bibliothèque de fonctions en JavaScript. C’est une librairie légère : « écrire moins, faire plus »</li>
<li>C’est une bibliothèque javascript open-source et multibrowser.</li>
<li>Elle permet de parcourir et de manipuler très facilement le DOM des pages Web avec la syntaxe fortement similaire à celle d’XPath.</li>
<li>JQuery permet par exemple de changer / ajouter une classe CSS, créer des animations, modifier des attributs, etc.</li>
 </ol>
<button id="btnClick">Passer lasouris pour changer la couleur de la page </button>
</body>
</html>

Application

A travers cet application en va utiliser les événements souris suivant:

l’événement click
l’événement mouseover (ou mouseenter)
l’événement mouseout (ou mouseleave)
l’événenent scroll

Dans le dossier Jquery crée précédemment créer une page appEvenement01.html
Créer un dossier images qui contient deux images
Créer une page HTML qui ressemble à la page suivante:

Soit le style à utiliser

<style>
    img {opacity : 0.1; width :20%}
    #txtdiv {height : 100px ; width : 100% ; 
    overflow : hidden ; background : rgb(234, 184, 48) ; 
    padding : 5px ;}
 </style>

Créer un script jquery :

Au survol d’une des deux image elle devient opaque et est agrandie de 50 pour-cent.(mouseover), le curseur de la souris prend la forme de pointeur.
Au survol de deuxième image (mouseout) elle garde sont opacité et et sa largeur de 50 pour-cent.
Au survol de la boîte jaune (mouseenter équivaut à mouseover) ajout de barres de défilement (overflow :scroll).
En emploi de la roulette de la souris alors que la boîte jaune est survolée la hauteur de cette dernière est ajustée à son contenu.
Au survol de la boîte jaune (mouseleave) elle revient à l’état initial.

Les événements en jQuery

Les événements de clavier avec jQuery

Sommaire du cours jQuery

jQuery

Les événements de souris en jQuery

Objectifs

Définitions

L’écoute sur la souris

Quelques méthodes

Méthode click()

Méthode dblclick()

Méthode hover()

Application

Sommaire du cours jQuery

Les événements en jQuery

Les événements de clavier avec jQuery

You may also like

Correction application animate() V2

La méthode animate() de jQuery v2

Correction application animate()