Les évènements en Javascript

Ce tuto a été créé par Mic54800 membre du forum créer un site et je vous invite à visiter son site Web : Créer un site gratuitement.

Ce tuto va vous apprendre à vous servir d'évènements JavaScript pour, par exemple, animer vos formulaires.
Ces évènements se révèlent interessant dans la plupart des formulaires, afin de guider vos visiteurs, leur expliquer ce que doit contenir tel ou tel champ.

Voici une liste de quelques évènements Javascript :



Comment appliquer ces évènements à un formulaire .. ?

Prenons pour exemple un simple un formulaire composé d'un champ texte et d'un bouton.
Appliquons lui un évènement afin de comprendre comment sa fonctionne :



Exemple :


Explication :

onclick="   : Lors du clic sur le bouton
champ_texte   : Le nom du champ ou l'évènement va s'appliquer
.value='Ma nouvelle valeur'   : La valeur du champ nommé dernièrement
"   : Fin de l'évènement

Ce qui donne le code suivant : onclick="champ_texte.value='Ma nouvelle valeur'"

Fonctions des évènements :

onchange="" Dans un select, voir ci dessous.
onclick="" Au clic sur un champ/bouton ...
onblur="" Lors du rejet du focus.
onfocus="" Lors du don du focus.
onmouseover="" lorsque le pointeur de la souris passe sur le champ/bouton.
onmouseout="" Lorsque le pointeur de la souris quitte le champ/bouton.
ondblclick="" Lorsque l'utilisateur fait un double clic sur le champ/bouton.

Finit la théorie, passons à la pratique


Désormais, il n'y aura plus besoin d'explications, éxépté pour le premier évènement : onChange .

onChange


onChange permet d'éxécuter une action lorsqu'une option, un champ est changé.
Dans notre exemple, la valeur d'origine de notre champ valeur est Changez ce texte.
Dès lors que vous aurez changé ce texte et quitté ce champ ( en cliquant hors de celui-ci ), la valeur du champ visualisateur_onchange va changer en Valeur changée.
Nous aurions aussi bien pu écrire l'intérieur de l'évènement onChange de cette façon :
onchange= "this.form.value='Valeur changée'"

Explication :

this     : Signifie ' Dans ce formulaire '.
form     : Signifie qu'il s'agit d'un formulaire.
value='' : Signifiant la nouvelle valeur.



onClick

Expliqué en haut, en premier exemple.
Vous pouvez toujours le consulter en cas de trou de mémoire !

onBlur

Lorsque le champ ( ici text ) perd le focus, l'action est éxécutée !
Perdre le focus est l'action de sortir d'une zone text dans laquelle on est rentré.
Exemple ci dessous, cliquez d'abord dans la zone text et ensuite en dehors pour visualisez l'effet !




onFocus

onFocus est le contraire de onBlur !
L'action est éxécutée lors du clic dans la zone text !




onMouseOver

onMouseOver éxécute une action lord du survol d'une zone text ( mais encore d'un bouton .. )




onMouseOut

onMouseOut éxécute une action lorsque le pointeur est hors de la zone text.
Pour qu'il éxécute son action, il faut que le pointeur soit ait survolé une fois la zone.




onDblClick

onDblClick éxécute une action lorsqu'on double clic sur une zone text ou un bouton !
Pour changer, prenons un bouton en exemple !




Vous êtes maintenant capable ..

Vous pouvez maintenant personnalisez vos formulaires !
Il vous sera appris plus tard comment donner le focus au survol d'un champ, comment créer une fenêtre d'alerte ..
Petit exemple de ce que pouvez créer avec vos connaissances :




Mais encore, un petit casse tête =D




Voila, tous ces exemples ont été créés afin de vous faire comprendre l'utilisation de ces évènements qui peuvent se révéler intéressant pour rendre votre site un poil plus dynamique !
J'éspère que je vous aurais appris des choses dont vous allez pouvoir vous servir par la suite !
@++

Voir/déposer un commentaire (0) | Signaler un problème