Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

NodeBB

  1. Home
  2. Programmation
  3. Développement web
  4. Javascript
  5. [JQuery] Evenement de base

[JQuery] Evenement de base

Scheduled Pinned Locked Moved Javascript
5 Posts 3 Posters 2.9k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • mars073M
    mars073M
    mars073
    wrote on last edited by
    #1

    <p>Salut all,<br/>
    Aujourd'hui je vais vous montrer les événement de base des éléments en JQuery lié au clavier et à la souris.<br/><br/>
    Les événements les plus utilisés sont lié à la souris donc je vais commencer par cela, la disposition du code est expliquée dans mon intro donc je vais mettre moins de code... D:<br/><br/>
    petit exemple quand même avec l'event .click() en interaction avec un objet donc l'id est "MrPoke":</p>
    <pre class="ipsCode prettyprint lang-auto">
    $("#MrPoke").click(function() {
    // code à exécuter lors de l’événement
    });
    </pre>
    <p>Événements liés à la souris les plus utilisés:<br/>

    • .click() : à quoi ça sert quoi déjà... c'est quand on clique sur l'élément.<br/>
    • .dbclick() : double clique sur l'élèment.<br/>
    • .mousedown() : lorsque vous enfoncez un bouton de la souris sur l’élément.<br/>
    • .mouseup() : event successif à .mousedown(), c'est à dire que c'est lorsque que vous arrêtez d'enfoncer le bouton sur l’élément.<br/>
    • .mouseenter() : lorsque vous placez votre curseur sur l’élément ou un de ses enfants.<br/>
    • .mouseleave() : lorsque vous retirez votre curseur de l'élément.<br/>
    • .mousemove() : lorsque vous déplacez le curseur sur l'élèment.<br/><br/>
      Pour le clavier je vais donner un exemple de raccourcis clavier on va dire faire un mouvement de mon #MrPoke, je vous passe le code html, et css:</p>
      <pre class="ipsCode prettyprint lang-auto">
      $(document).keypress(function(e) { // lorsque une touche est pressée sur le document ou un de ses enfantés en bref tout... avec une récupération d'entrée (la variable "e").
      switch (e.which) { // on test l'entrée sous forme de chiffre
      case 90: $("#MrPoke").stop().animate({top : '-=100px'}); break; // Si la touche est 90 (=z) on déplace #MrPoke vers le haut.
      case 68: $("#MrPoke").stop().animate({left : '+=100px'}); break; // 68 = d
      case 83: $("#MrPoke").stop().animate({top : '+=100px'}); break; // 83 = s
      case 81: $("#MrPoke").stop().animate({left : '-=100px'}); break; // 81 = q
      }
      });
      </pre>
      <p>Événements liés à la souris:<br/>
    • .keydown() : lorsque l'on appuie sur une touche.<br/>
    • .keyup() : lorsque l'on relâche la touche.<br/>
    • .keypress() : lorsque l'on presse une touche, continuel contrairement à .keydown().<br/><br/>
      et encore une fonction:<br/>
    • .focus() : lorsque l’élément est sélectionné.<br/><br/>
      ps: pour les raccourcis clavier je vous invite à cliquer sur <a href="http://chief.over-blog.com/article-raccourcis-clavier-en-javascript-jquery-69187878.html" rel="external nofollow">ce lien</a> ou il y a un tuto + liste<br/><br/>
      Bonne programmation à tous!<br/>
      Cordialement,<br/>
      Mars073</p>

    Aide à l'apprentissage et la réalisation pour des graphismes, des programmes, des sites ou autres.Signature aléatoire, proposez vous aussi une signature ici!

    1 Reply Last reply
    1
    • S
      S
      Soon
      wrote on last edited by
      #2

      <p>Fail lien ?</p><p></p><p>
      Merci du partage.</p>

      1 Reply Last reply
      0
      • AzadA
        AzadA
        Azad
        wrote on last edited by
        #3

        <p>Merci du partage ! 🙂 </p>

        Administrateur du forum.
        Contactez-moi par message privé ou par mail.

        1 Reply Last reply
        0
        • mars073M
          mars073M
          mars073
          wrote on last edited by
          #4

          <p>toujours un plaisir de partager mon savoir surtout quand y a au moins quelques personnes que ça intéresse x')</p>

          Aide à l'apprentissage et la réalisation pour des graphismes, des programmes, des sites ou autres.Signature aléatoire, proposez vous aussi une signature ici!

          1 Reply Last reply
          0
          • AzadA
            AzadA
            Azad
            wrote on last edited by
            #5

            <p>Bah personnellement je trouve ça très intéressant, j'aime bien découvrir le mode de fonctionnement des différents langages (même si je n'y -pour l'instant- pas grand chose en jQuery). 🙂 </p>

            Administrateur du forum.
            Contactez-moi par message privé ou par mail.

            1 Reply Last reply
            0

            Hello! It looks like you're interested in this conversation, but you don't have an account yet.

            Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

            With your input, this post could be even better 💗

            Register Login
            Reply
            • Reply as topic
            Log in to reply
            • Oldest to Newest
            • Newest to Oldest
            • Most Votes


            • Login

            • Login or register to search.
            Powered by NodeBB Contributors
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • World
            • Users
            • Groups