[JQuery] Evenement de base

[mars073]

Salut all,
Aujourd'hui je vais vous montrer les événement de base des éléments en JQuery lié au clavier et à la souris.

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

petit exemple quand même avec l'event .click() en interaction avec un objet donc l'id est "MrPoke":

$("#MrPoke").click(function() {
// code à exécuter lors de l’événement 
});

Événements liés à la souris les plus utilisés:

• .click() : à quoi ça sert quoi déjà... c'est quand on clique sur l'élément.
• .dbclick() : double clique sur l'élèment.
• .mousedown() : lorsque vous enfoncez un bouton de la souris sur l’élément.
• .mouseup() : event successif à .mousedown(), c'est à dire que c'est lorsque que vous arrêtez d'enfoncer le bouton sur l’élément.
• .mouseenter() : lorsque vous placez votre curseur sur l’élément ou un de ses enfants.
• .mouseleave() : lorsque vous retirez votre curseur de l'élément.
• .mousemove() : lorsque vous déplacez le curseur sur l'élèment.

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:

$(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
}
});

Événements liés à la souris:

• .keydown() : lorsque l'on appuie sur une touche.
• .keyup() : lorsque l'on relâche la touche.
• .keypress() : lorsque l'on presse une touche, continuel contrairement à .keydown().

et encore une fonction:

• .focus() : lorsque l’élément est sélectionné.

ps: pour les raccourcis clavier je vous invite à cliquer sur ce lien ou il y a un tuto + liste

Bonne programmation à tous!
Cordialement,
Mars073

[Soon]

Fail lien ?

Merci du partage.

[Azad]

Merci du partage !

[mars073]

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

[Azad]

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