[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... D:

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