Cours JAVA SCRIPT SpeeDEricH.com LES EVENEMENTS

Généralités : avec les événements et surtout leur gestion, tu abordes le côté "magique" de Javascript. En HTML classique, il y a un événement que tu connais bien. C'est le clic de la souris sur un lien pour te transporter sur une autre page Web. Hélas, c'est à peu près le seul. Heureusement, Javascript va en ajouter une bonne dizaine, pour ton plus grand plaisir. Les événements Javascript, associés aux fonctions, aux méthodes et aux formulaires, ouvrent grand la porte pour une réelle interactivité de tes pages. Passons en revue différents événements implémentés en Javascript.

Description	Événements
Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément.	Clik
Lorsque la page est chargée par le browser ou le navigateur.	Load
Lorsque l'utilisateur quitte la page.	Unload
Lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout autre élément.	MouseOver
Lorsque le pointeur de la souris quitte un lien ou tout autre élément. Attention : Javascript 1.1 (donc pas sous MSIE 3.0 et Netscape 2)	MouseOut
Lorsque un élément de formulaire a le focus c-à-d devient la zone d'entrée active.	Focus
Lorsque un élément de formulaire perd le focus c-à-d que l'utilisateur clique hors du champs et que la zone d'entrée n'est plus active.	Blur
Lorsque la valeur d'un champ de formulaire est modifiée.	Change
Lorsque l'utilisateur sélectionne un champ dans un élément de formulaire.	Select
Lorsque l'utilisateur clique sur le bouton Submit pour envoyer un formulaire	Submit

Les gestionnaires d'événements : pour être efficace, il faut qu'à ces événements soient associées les actions prévues par toi. C'est le rôle des gestionnaires d'événements. La syntaxe est : onévénement="fonction()" Par exemple, onClick="alert('Tu as cliqué sur cet élément')".
De façon littéraire, au clic de l'utilisateur, ouvrir une boite d'alerte avec le message indiqué.
onclick : événement classique en informatique, le clic de la souris.

Le code de ceci est :
<FORM>
<INPUT TYPE="button" VALUE="Tu cliques ici" onClick="alert('Tu as bien cliqué ici')">
</FORM>
Je reviendrais en détail sur les formulaires dans le chapitre suivant.
onLoad et onUnload : l'événement Load survient lorsque la page a fini de se charger. A l'inverse, Unload survient lorsque l'utilisateur quitte la page. Les événements onLoad et onUnload sont utilisés sous forme d'attributs de la balise <BODY> ou <FRAMESET>. Tu peux ainsi écrire un script pour souhaiter la bienvenue à l'ouverture d'une de tes pages et un petit mot d'au revoir au moment de quitter celle-ci.
<HTML>
<HEAD>
<SCRIPT LANGUAGE='Javascript'>
function bienvenue() {
alert("Bienvenue au SpeeDEricH.com");
}
function au_revoir() {
alert("Au revoir et à bientôt");
}
</SCRIPT>
</HEAD>
<BODY onLoad='bienvenue()' onUnload='au_revoir()'>
Html normal
</BODY>
</HTML>
onmouseOver et onmouseOut : l'événement onmouseOver se produit lorsque le pointeur de la souris passe au dessus (sans cliquer) d'un lien ou d'une image. Cet événement est fort pratique pour, par exemple, afficher des explications soit dans la barre de statut soit avec une petite fenêtre genre info bulle. L'événement onmouseOut, généralement associé à un onmouseOver, se produit lorsque le pointeur quitte la zone sensible (lien ou image). Note que si onmouseOver est du Javascript 1.0, onmouseOut est du Javascript 1.1. En clair, onmouseOut ne fonctionne pas avec Netscape 2.0 et Explorer 3.0. Je parlerais plus longuement de onmouseOver er de onmouseOut plus loin dans ce chapitre.
onFocus : l'événement onFocus survient lorsqu'un champ de saisie a le focus c.-à-d. quand son emplacement est prêt à recevoir ce que l'utilisateur à l'intention de taper au clavier. C'est souvent la conséquence d'un clic de souris ou de l'usage de la touche "Tab".
Si tu cliques dans la zone de texte, tu effectueras un focus

onBlur : l'événement onBlur a lieu lorsqu'un champ de formulaire perd le focus. Cela se produit quand l'utilisateur ayant terminé la saisie qu'il effectuait dans une case, clique en dehors du champ ou utilise la touche "Tab" pour passer à un champ. Cet événement sera souvent utilisé pour vérifier la saisie d'un formulaire. Si après avoir cliqué et/ou écrit dans la zone de texte, tu cliques ailleurs dans le document, tu produiras un événement Blur.

Le code est :
<FORM>
<INPUT TYPE=text onBlur="alert('Ceci est un Blur')">
</FORM>
onchange : cet événement s'apparente à l'événement onBlur mais avec une petite différence. Non seulement la case du formulaire doit avoir perdu le focus mais aussi son contenu doit avoir été modifié par l'utilisateur.
onselect : cet événement se produit lorsque l'utilisateur a sélectionné (mis en sur brillance ou en vidéo inverse) tout ou partie d'une zone de texte dans une zone de type text ou textarea.
Gestionnaires d'événement disponibles en Javascript : il me semble utile dans cette partie "avancée" de présenter la liste des objets auxquels correspondent des gestionnaires d'événement bien déterminé.

Objets	Gestionnaires d'événement disponibles
Fenêtre	onLoad, onUnload
Lien hypertexte	onClick, onmouseOver, on mouseOut
Élément de texte	onBlur, onChange, onFocus, onSelect
Élément de zone de texte	onBlur, onChange, onFocus, onSelect
Élément bouton	onClick
Case à cocher	onClick
Bouton Radio	onClick
Liste de sélection	onBlur, onChange, onFocus
Bouton Submit	onClick
Bouton Reset	onClick

La syntaxe de onmouseOver : le code du gestionnaire d'événement onmouseOver s'ajoute aux balises de lien : <A HREF="" onmouseOver="action()">lien</A> Ainsi, lorsque l'utilisateur passe avec sa souris sur le lien, la fonction action() est appelée. L'attribut HREF est indispensable. Il peut contenir l'adresse d'une page Web si tu souhaites que le lien soit actif ou simplement des guillemets si aucun lien actif n'est prévu. Je reviendrais ci-après sur certains désagréments du codage HREF="". Voici un exemple. Par le survol du lien "message important", une fenêtre d'alerte s'ouvre.
Le code est :
<BODY>
...
<A HREF="" onmouseOver="alert('Coucou')">message important</A>
...
<BODY>
ou si tu préfères utiliser les balises <HEAD> :
<HTML>
<HEAD>
<SCRIPT language="Javascript">
function message(){
alert("Coucou")
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="" onmouseOver="message()">message important</A>
</BODY>
</HTML>
La syntaxe de onmouseOut : tout à fait similaire à onmouseOver, sauf que l'événement se produit lorsque le pointeur de la souris quitte le lien ou la zone sensible. Au risque de me répéter, si onmouseOver est du Javascript 1.0 et sera donc reconnu par tous les browsers, onmouseOut est du Javascript 1.1 et ne sera reconnu que par Netscape 3.0 et plus et Explorer 4.0 et plus (et pas par Netscape 2.0 et Explorer 3.0). On peut imaginer le code suivant :
<A HREF="" onmouseOver="alert('Coucou toi')" onmouseOut="alert('Au revoir')">message important</A>
Les puristes devront donc prévoir une version différente selon les versions Javascript. Problème ! Et si on clique quand même ... Tu as codé ton instruction onmouseOver avec le lien fictif <A HREF=""... >, tu as même prévu un petit texte, demandant gentiment à l'utilisateur de ne pas cliquer sur le lien et comme de bien entendu celui-ci clique quand même. Horreur, le browser affiche alors l'entièreté des répertoires de sa machine ou de ton site. Ce qui est un résultat non désiré et pour le moins imprévu. Pour éviter cela, prends l'habitude de mettre l'adresse de la page encours ou plus simplement le signe # (pour un ancrage) entre les guillemets de HREF. Ainsi, si le lecteur clique quand même sur le lien, au pire, la page encours sera simplement rechargée et sans perte de temps car elle est déjà dans le cache du navigateur. Prends donc l'habitude de mettre le code suivant : <A HREF="#" onmouseOver="action()"> lien </A>.
Changement d'images : avec le gestionnaire d'événement onmouseOver, tu peux prévoir qu'après le survol d'une image par l'utilisateur, une autre apparaisse (pour autant qu'elle soit de la même taille). le code est relativement simple.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript1.1">
function lightUp() {
document.images["homeButton"].src="button_hot.gif"
}
function dimDown() {
document.images["homeButton"].src="button_dim.gif"
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onmouseOver="lightUp();" onmouseOut="dimDown();">
<IMG SRC="button_dim.gif" name="homeButton" width=100 height=50 border=0> </A>
</BODY>
</HTML>
Complète toujours en Javascript les attributs width=x height=y de tes images. Il n'y a pas d'exemple ici pour la compatibilité avec les lecteurs utilisant explorer 3.0. En effet, non seulement onmouseOut mais aussi image[] sont du Javascript 1.1.
L'image invisible : ce changement d'image ne te donne-t-il pas des idées?... Petit futé ! Et oui, tu peux prévoir une image invisible de la même couleur que l'arrière plan (même transparente). Tu la places avec malice sur le chemin de la souris de l'utilisateur et son survol peut ,à l'insu de l'utilisateur, déclencher un feu d'artifice d'actions de ton choix. Magique le Javascript avec le SpeeDEricH.com !