Javascript
Les événements
HomeUpDown

Généralités

Avec les événements et surtout leur gestion, nous abordons le côté "magique" de Javascript.
En Html classique, il y a un événement que vous connaissez bien. C'est le clic de la souris sur un lien pour vous transporter sur une autre page Web. Hélas, c'est à peu près le seul. Heureusement, Javascript va en ajouter une bonne dizaine, pour votre 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 vos pages.


 

Les événements

Passons en revue différents événements implémentés en Javascript.

Description Evénement
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 vous. C'est le rôle des gestionnaires d'événements. La syntaxe est

onévénement="fonction()"

Par exemple, onClick="alert('Vous avez 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

Evénement classique en informatique, le clic de la souris.

Le code de ceci est :
<FORM>
<INPUT TYPE="button" VALUE="Cliquez ici"
onClick="alert('Vous avez bien cliqué ici')">
</FORM>
Nous reviendrons 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>. On peut ainsi écrire un script pour souhaiter la bienvenue à l'ouverture d'une page et un petit mot d'au revoir au moment de quitter celle-ci.

    <HTML>
    <HEAD>
    <SCRIPT LANGUAGE='Javascript'>
    function bienvenue() {
    alert("Bienvenue à cette page");
    }
    function au_revoir() {
    alert("Au revoir");
    }
    </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 infobulle.

A titre d'illustration, passez avec le pointeur de la souris sur le mot voyelles (sans cliquer sur le lien).

Voyelles

L'événement onmouseOut, généralement associé à un onmouseOver, se produit lorsque le pointeur quitte la zone sensible (lien ou image).
Notons qui 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.

Nous parlons plus longuement de onmouseOver er de onmouseOut dans le chapitre "Les événements -- Avancé --".


 

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 vous cliquez dans la zone de texte, vous effectuez 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, vous cliquez ailleurs dans le document, vous produisez 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 surbrillance ou en vidéo inverse) tout ou partie d'une zone de texte dans une zone de type text ou textarea.


Fin de la partie prévue pour les débutants --- Début de la partie considérée comme avancée


Gestionnaires d'événement disponibles en Javascript

Il nous 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
Elément de texte onBlur, onChange, onFocus, onSelect
Elément de zone de texte onBlur, onChange, onFocus, onSelect
Elé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 vous souhaitez que le lien soit actif ou simplement des guillemets si aucun lien actif n'est prévu. Nous reviendrons 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 vous préférez 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 nous 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')" 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...

Vous avez codé votre instruction onmouseOver avec le lien fictif <A HREF=""... >, vous avez 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 votre site). Ce qui est un résultat non désiré et pour le moins imprévu.

Pour éviter cela, prenez 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.
Prenez donc l'habitude de mettre le code suivant <A HREF="#" onmouseOver="action()"> lien </A>.


 

Changement d'images

Avec le gestionnaire d'événement onmouseOver, on peut prévoir qu'après le survol d'un image par l'utilisateur, une autre image 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éter toujours en Javascript les attributs width=x height=y de vos 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[] est du Javascript 1.1.


 

L'image invisible

Ce changement d'image ne vous donne-t-il pas des idées?... Petit futé! Et oui, on peut prévoir une image invisible de la même couleur que l'arrière plan (même transparente). On la place 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 votre choix. Magique le Javascript ?


HomeDown