|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Evénement | Description | Test | Effet |
---|---|---|---|
Abort (onAbort) |
Cet événement a lieu lorsque l'utilisateur interrompt le chargement de l'image | ||
Blur (onBlur) |
Se produit lorsque l'élément perd le focus, c'est-à-dire que l'utilisateur clique hors de cet élément, celui-ci n'est alors plus sélectionné comme étant l'élément actif. | ||
Change (onChange) |
Se produit lorsque l'utilisateur modifie le contenu d'un champ de données. | ||
Click (onClick) |
Se produit lorsque l'utilisateur clique sur l'élément associé à l'événement. | Test | |
dblclick (onDblclick) |
Se produit lorsque l'utilisateur double-clique sur l'élément associé à l'événement (un lien hypertexte ou un élément de formulaire). Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures | Test | |
dragdrop (onDragdrop) |
Se produit lorsque l'utilisateur effectue un glisser-déposer sur
la fenêtre du navigateur. Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures |
||
error (onError) |
Se déclenche lorsqu'une erreur apparaît durant
le chargement de la page. Cet événement fait partie du Javascript 1.1. |
||
Focus (onFocus) |
Se produit lorsque l'utilisateur donne le focus à un élément, c'est-à-dire que cet élément est sélectionné comme étant l'élément actif | ||
keydown (onKeydown) |
Se produit lorsque l'utilisateur appuie sur une touche de son clavier.
Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures |
||
keypress (onKeypress) |
Se produit lorsque l'utilisateur maintient une touche de son clavier enfoncée.
Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures |
||
keyup (onKeyup) |
Se produit lorsque l'utilisateur relâche une touche de son clavier préalablement enfoncée.
Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures |
||
Load (onLoad) |
Se produit lorsque le navigateur de l'utilisateur charge la page en cours | ||
MouseOver (onMouseOver) |
Se produit lorsque l'utilisateur positionne le curseur de la souris au-dessus d'un élément | Test | |
MouseOut (onMouseOut) |
Se produit lorsque le curseur de la souris quitte un élément. Cet événement fait partie du Javascript 1.1. |
Test | |
Reset (onReset) |
Se produit lorsque l'utilisateur efface les données d'un formulaire à l'aide du bouton Reset. | ||
Resize (onResize) |
Se produit lorsque l'utilisateur redimensionne la fenêtre du navigateur | ||
Select (onSelect) |
Se produit lorsque l'utilisateur sélectionne un texte (ou une partie d'un texte) dans un champ de type "text" ou "textarea" | ||
Submit (onSubmit) |
Se produit lorsque l'utilisateur clique sur le bouton de soumission d'un formulaire (le bouton qui permet d'envoyer le formulaire) | ||
Unload (onUnload) |
Se produit lorsque le navigateur de l'utilisateur quitte la page en cours |
Chaque événement ne peut pas être associé à n'importe quel objet. Il est évident par exemple qu'un événement OnChange ne pourra pas s'appliquer à un lien hypertexte. Voici un tableau récapitulant les objets auxquels peuvent être associés chaque événement :
Evénements | Objets concernés |
---|---|
abort | Image |
blur | Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window |
change | FileUpload, Select, Submit, Text, TextArea |
click | Button, document, Checkbox, Link, Radio, Reset, Select, Submit |
dblclick | document, Link |
dragdrop | window |
error | Image, window |
focus | Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window |
keydown | document, Image, Link, TextArea |
keypress | document, Image, Link, TextArea |
keyup | document, Image, Link, TextArea |
load | Image, Layer, window |
mousedown | Button, document, Link |
mousemove | Aucun spécifiquement |
mouseout | Layer, Link |
mouseover | Area, Layer, Link |
mouseup | Button, document, Link |
move | window |
reset | form |
resize | window |
select | text, Textarea |
submit | Form |
unload | window |
Le mieux pour apprendre à se servir des événements
est de s'entraîner à écrire de petits codes...
Pour vous inspirer, pensez à regarder les fichiers sources
de certaines pages web, mais pensez toujours à respecter
les auteurs des codes en ne faisant pas un copier-coller de leurs
scripts sans leur accord (il est généralement de
bon ton de citer la source du javascript que l'on récupère...).
Le code correspondant à une boîte de dialogue est très simple :
window.alert("Votre Texte");
Il s'agit désormais de l'appeler à l'aide d'un événement dans l'attribut « href » d'un lien hypertexte :
<html> <head> <title>Ouverture d'une boîte de dialogue lors d'un click</title> </head> <body> <a href="javascript:;" onClick="window.alert('Message d\'alerte à utiliser avec moderation');"> Cliquez ici!</a> </body> </html>
Analyse du script:
Aperçu de l'effet du script:
Cliquez
ici!
Il peut être agréable de jouer avec le gestionnaire OnMouseOver pour créer un menu interactif qui se modifie au passage de la souris. On peut même ajouter le gestionnaire OnMouseOut pour rétablir l'image originale lorsque le curseur quitte l'image (Rappel: Son utilisation est limitée aux navigateurs supportant javascript 1.1 et supérieur!). Ce type d'effet est appelé rollover.
Script:
<html> <head> <title>Modification d'une image lors du passage de la souris</title> </head> <body> <a href="javascript:;" onMouseOver="document.img_1.src='image2.gif';" onMouseOut="document.img_1.src='image1.gif';"> <img name="img_1" src="image1.gif"> </a> </body> </html>
Analyse du script:
Ce document intitulé «Javascript - Les événements» issu de l'encyclopédie informatique Comment Ça Marche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
|
Mon javascript
27-12-2018
|
||