Les événements de souris en jQuery


Les événements de souris en jQuery

  1. Objectifs

    • Connaitre les événements en jQuery en jQuery.
    • Savoir utiliser les événements en jQuery en jQuery.
  2. 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 !
      });




  3. 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)
  4. Quelques méthodes

    1. 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)
    2. 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)
    3. 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)

      • 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:
        • Les événements de souris en jQuery

        • 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.

Abonnez vous à notre chaîne YouTube gratuitement