 |
Généralités
La gestion des événements JavaScript
au sein des Pages HTML, fait toute la force de JavaScript.
Les Actions du visiteur de nos Pages HTML ( purement HTML ) ne sont
pas prises en compte..
( Promenade de la souris sur Objets ..Changement de contenu d'une zone
de saisie..Choix dans une liste déroulante..)
En Html classique, il n'y a qu'un événement
possible ...c'est le Click sur Lien.
Javascript nous permet d'exploiter beaucoup
d'autres évènements..
C'est eux et leur gestion qui vont apporter à
nos pages HTML une superbe
interactivité avec le visiteur..et
cela sans avoir besoin du serveur hébergeant.
Les Objets de Formulaires ne seront pas obligatoirement transmis vers
les Serveurs..Nous pourrons donc détecter les actions du visiteur
sur les objets de Formulaire..etc...
Pour exploiter ces Evènements JavaScript a prévu des
gestionnaires d'Evènements.
|
|
Liste des Evènements JavaScript
Le nom des gestionnaires d'évènements est toujours celui
de l'évènement précédé de la syllabe
on.
Par exemple, le gestionnaire de l'évènement Click
est onClick.
Vous pouvez cliquer sur les noms des gestionnaires d'évènements
marqués comme Liens..pour étudier un exemple!
| Action créant l' évènement |
Gestionnaire |
| Click sur un bouton, un lien
ou tout autre élément. |
onClick |
| Chargement complet de la page par
le navigateur. |
onLoad |
| En quittant la page. |
onUnload |
| Lorsque le pointeur de la souris 'survole'
un Objet |
onMouseOver |
Lorsque le pointeur de la souris quitte un
Objet
Javascript 1.1 (donc n'est pas géré
par IE 3.0 et Netscape 2) |
onMouseOut |
| Un élément de formulaire a le
focus c-à-d devient la zone
d'entrée active. |
onFocus |
| Un élément de formulaire perd
le focus (Click en dehors de la zone active ). |
onBlur |
| Changement de la valeur d'un champ
de formulaire . |
onChange |
| Sélection partielle ou totale
du contenu d'un champ de saisie. |
onSelect |
| Click sur le bouton Submit pour
envoyer un formulaire |
onSubmit |
| Click sur le bouton Reset |
onReset |
|
|
La Gestion des Evènements
Pour exploiter les évènements il
faut leur associer des actions..
Par exemple , supposons que vous ayez écrit
une fonction JavaScript : fonct1
réalisant des actions précises lors de l'évènement
onClick.
la syntaxe générique sera :
onClick="fonct1()"
[ retour à la liste des
Evènements ]
Passons maintenant en revue la gestion
de quelques uns des principaux Evènements.
|
|
Liste des Objets de JavaScript et des Gestionnaires d' évènement
associés
| Objet JavaScript |
Gestionnaire d'événement
associé |
| Window (page) |
onLoad, onUnload |
| Lien |
onClick, onMouseOver, onMouseOut |
| Zone de texte(simple) et Textarea |
onBlur, onChange, onFocus, onSelect |
| Bouton simple |
onClick |
| Case à cocher |
onClick |
| Bouton Radio |
onClick |
| Liste de sélection |
onBlur, onChange, onFocus |
| Bouton Submit |
onClick |
| Bouton Reset |
onClick |
| Formulaire |
onSubmit , onReset |
[ retour à la liste
des Evènements ]
|
|
onClick
Rappelons que ce gestionnaire gère l'
évènement Click
qui survient lors d'un Click de souris ( bouton Gauche )
D'ailleurs ne vous attendez pas à pouvoir
exploiter l'évènement Click bouton Droit..! Ceci a été
rendu impossible afin de conserver le fonctionnement de nos Pages avec
tout système d'exploitation.(Mac Intosh compris..)..!
Cliquez
moi!
Voici le listing correspondant :
<A HREF="#" onClick="alert('Quel
Beau Click !!')">Cliquez-moi!</A>
Ici le gestionnaire d'évènement appelle directement la
méthode alert()...sans passer par une fonction ..!
Cette solution est intéressante tant que le gestionnaire n'a
pas trop d'actions à réaliser lorsque survient l'évènement.
Sinon , préférez toujours l'appel de fonction..
[ retour à la liste des
Evènements ]
|
|
onLoad
Ce gestionnaire gère l'évènement
Load qui apparait en fin de chargement complet d'une Page.
Par exemple, il est possible de réaliser
une ou plusieurs actions à condition qu'une certaine page soit entièrement
chargée.
Voici un exemple qui permet de charger une page
dans une certaine frame à partir de cet évènement:
<SCRIPT language="JavaScript"><!--
function charge()
{
parent.frameA.location.href="pageA.htm";
}
// -->
</SCRIPT>
<BODY onLoad="charge()">
On peut dire que le chargement des 2 pages s'effectue
en cascade..Cela peut être très important et nécessaire
dans certains cas. Sinon , le fonctionnement des Navigateurs étant
multitâche , on ne sait jamais dans quel ordre les
différentes pages seront chargées.
[ retour à la liste des
Evènements ]
|
|
onFocus et onBlur
Si l'on clique dans une zone Texte de Formulaire on créé
l'évènement Focus affecté à cet Objet.
Si l'on clique en dehors de cette zone on créé l'évènement
Blur de cet Objet.
Voici un exemple:
Si vous cliquez dans la zone vous
créez l'évènement Focus..à côté..l'évènement
Blur !
Voici le Listing correspondant:
<SCRIPT language="JavaScript"><!--
function foc(etat)
{ if (etat==1) document.formul.zone_f.value="Vous
avez créé Focus";
else document.formul.zone_f.value="Vous
avez créé Blur..";}
//-->
</SCRIPT>
<BODY>
<FORM name="formul">
<input type="text" size=30 name="zone_f"
onFocus="foc(1);" onBlur="foc(0);">
</FORM>
</BODY>
[ retour à la liste des
Evènements ]
|
|
onMouseOver
Pour gèrer le survol des Objets..
Le survol de l'un ou l'autre des 2
Logos déclenche leur permutation..!
|