. Les événements Javascript : syntax
Le click de la sourie, le passage de la sourie … sont dit événements. Javascript peut associer des méthodes ou procédures à ces derniers à l’aide de la syntaxe :
onEvenement="Action_Javascript_ou_Fonction();"Grâce au Javascript de nombreuses opérations sont susceptible d’être déclenchés dès que le visiteur effectue une opération sur la page à titre d’exemple :
– En cliquant sur un lien ou un bouton, un événement onClick se déclenche
– En passant la sourie sur un texte, un événement onMouseover se produit
– En modifiant le contenu d’un champ de texte, un événement onChange se déclenche
…
2. Liste des événement Javascript
| Evénement Javascript | Effet produit |
| onClick | Se produit lorsque l’utilisateur clique sur l’élément associé à l’événement |
| onLoad | Se produit lorsque le navigateur de l’utilisateur charge la page en cours |
| onUnload | Se produit lorsque le navigateur de l’utilisateur quitte la page en cours |
| onMouseOver | Se produit lorsque l’utilisateur positionne le curseur de la souris au-dessus d’un élément |
| onMouseOut | Se produit lorsque le curseur de la souris quitte un élément |
| onMouseDown | quand le bouton de la sourie est appuyé |
| onMouseMove | quand le curseur bouge |
| onMouseUp | quand le bouton de la sourie est relâché |
| onFocus | Se produit lorsque l’utilisateur donne le focus à un élément, c.a.d élément est sélectionné comme étant actif |
| onBlur | Se produit lorsque l’élément perd le focus, c.a.d élément non sélectionné ( désactivé ) |
| onChange | Se produit lorsque l’utilisateur modifie le contenu d’un champ de données |
| onSelect | Se produit lorsque l’utilisateur sélectionne un texte dans un champ de type “text” ou “textarea” ou un objet |
| onSubmit | Se produit lorsque l’utilisateur clique sur le bouton de soumission d’un formulaire |
| onabort | lorsque l’utilisateur a stoppé le chargement de l’image |
| ondlclick | quand on fait un double clique |
| ondragdrop | quand on déplace un objet dans une fenêtre |
| onerror | lorsqu’il se produit une erreur de script |
| onkeydown | quand une touche du clavier est enfoncée |
| onkeypress | quand on appuie sur une touche |
| onkeyup | quand on lâche une touche du clavier |
| onMove | quand on déplace la fenêtre |
| onReset | quand on réinitialise |
| onResize | quand on redimensionne |
3. Exemples d’événement Javascript
Exemple 1 ( l’événement onLoad )
<body onload="alert('Bienvenue sur le site');">
</body>Cet exemple affiche le message “Bienvenue sur le site” dès le chargement de la page :
Exemple 2 ( l’événement onBlur )
</p>
<form><input size=40 type="text" value="Cliquez ici pour voir l'événement onblur" onblur="alert('vous avez quitté le champ de texte')"/>
</form>
<p>Testez vous même ce code
Vous verrez apparaitre la fenêtre suivante :
Exemple 3 ( les événements onMousOut et onMousOver)
<a href="#" onmouseOver="alert('vous avez testé onmouseover')" onmouseOut="alert('Vous venez de tester onMouseOut')">Evénement onMousOver</a>Quand vous faite passer la sourie au dessus du lien vous verrez apparaitre la fenêtre suivante :
Et quand vous quittez le lien vous verrez apparaitre la fenêtre suivante :
Exemple 4 ( changement d’image avec onMousOver et onMouseOut )
<html>
<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22Javascript%22%3E%0Afunction%20lightUp()%20%7B%0Adocument.images%5B%22voiture%22%5D.src%3D%22rouge.jpg%22%0A%7D%0Afunction%20dimDown()%20%7B%0Adocument.images%5B%22voiture%22%5D.src%3D%22blanche.jpg%22%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
<a href="#" onmouseOver="lightUp();" onmouseOut="dimDown();">
<img src="blanche.jpg" name="voiture" width=250 height=250 border=0> </a>
</body>
</html>Enregistrez ce fichier sur un dossier de votre machine, avec deux images : rouge.jpg et blanche.jpg que vous pouvez télécharger via google images. Vous pouvez aussi télécharger l’application via ce lien
Dans cet exemple quand vous faite passer la sourie sur l’image elle change, c’est l’événement onmouseOver=”lightUp();” qui se produit et fais afficher l’image rouge.jpg qui est programmée dans la fonction lightUp() :
function lightUp() {
document.images["voiture"].src="rouge.jpg"
}Et quand vous quittez l’image elle reprend sa forme c.a.d l’image blanche.jpg s’affiche qui est programmée dans la fonction dimDown() :
function dimDown() {document.images["voiture"].src="blanche.jpg"
}