<input type=”button” onClick=”alert(‘vous avez cliqué sur le bouton’) ;">
Cet évènement est supporté par les balises suivantes : <input type="button">, <input type="checkbox">, <input type="radio">, <input type="reset">, <input type="submit">, <a href..>.
11.3 Chargement
11.3.1 Load
Il se produit lorsque la page appelée – ou consultée - finit de se charger. Son gestionnaire d’événement est onLoad.
Exemple 11.3 - onLoad
<body onLoad=”alert(‘la page est chargée !’) ;">
Ce gestionnaire d’évènement est supporté uniquement par les balises <body> et <frameset>.
11.3.2 UnLoad
Il se produit lorsque vous quittez un document ou une page web. Son gestionnaire d’événement est onUnLoad.
Exemple 11.4 - onUnLoad
<body onUnLoad=”alert(‘Vous quittez la page !’) ;">
Ce gestionnaire d’évènement est supporté uniquement par les balises <body> et <frameset>.
11.3.3 Error
Lorsque le chargement d’une page ou d’un image s’interrompt en erreur, cela produit un événement JS. Le gestionnaire d’événement associé est onError.
Exemple 11.5 - onError
<img src="pix.gif" onError=”alert(‘Erreur de chargement !’) ;">
Il est supporté par les 3 balises suivantes : <body>, <frameset> et <img>.
11.3.4 Abort
Il se produit lors de l’interruption le chargement d’une image. Le gestionnaire d’événement est alors onAbort.
Exemple 11.6 - onAbort
<img src="pix.gif" onAbort=”alert(‘Vous avez interrompu le chargement de l’image !’) ;">
Il est supporté uniquement par les images, c’est-à-dire par la balise suivante : <img>.
11.4 Passage de la souris
11.4.1 MouseOver
Cela se produit lors du survol d’un lien ou d’une zone d’image activable. Une zone d’image activable est une partie d’image qui a été transformée en lien. Le gestionnaire associé à cet évènement est onMouseOver.
Exemple 11.7 - onMouseOver
<a href="http://www.google.fr"
onMouseOver=”alert(‘Pour aller sur google.fr, cliquer ici’) ;">http://www.google.fr</a>
Ce gestionnaire est supporté par les balises de lien, donc les 2 balises suivantes : <a href…> et <area href…>.
11.4.2 MouseOut
Lorsque le curseur de la souris sort de la zone de survol d’un lien ou d’une zone d’image activable, cela produit aussi un évènement. Son gestionnaire d’événement est onMouseOut.
Exemple 11.8 - onMouseOut
<a href="http://www.google.fr" onMouseOut=”alert(‘Vous ne voulez pas y aller ?’) ;">http://www.google.fr</a>
Il est supporté par mêmes balises que onMouseOver : <a href…> et <area href…>.
11.5 Focus des contrôles
11.5.1 Focus
Il se produit lors de l’activation d’un contrôle texte ou d’une sélection. Son gestionnaire d’événement est onFocus.
Exemple 11.9 - onFocus
<input type="text" value="votre nom" name=”nom” onFocus=”alert(‘Ecrivez votre nom ici’) ;">
Il est supporté par les balises suivantes : <input type="text">, <select>, <textarea> et <input type="password">.
11.5.2 Blur
Lorsque l’utilisateur quitte un contrôle texte ou sélection. Le gestionnaire associé est onBlur.
Exemple 11.10 - onBlur
<input type="text" value="votre nom" name=”nom” onBlur=”alert(‘Vous n\’avez rien oublié ?’) ;">
Ce gestionnaire est supporté par les balises <input type="text">, <select>, <textarea> et <input type="password">.
11.6 Changement
Lorsque la valeur d’un texte ou d’une option change dans un formulaire, cela produit aussi un événement en JS. Si l’utilisateur clique dans la zone de texte mais que vous ne touchez pas au texte, rien ne se produit. Son gestionnaire d’événement est le suivant onChange.
Exemple 11.11 - onChange
<input type="text" value="votre nom" name=”nom” onChange=”alert(‘Vous avez changé votre nom ??’) ;">
Il est supporté par les balises suivantes : <input type="text">, <select>, <textarea>, <input type="password">.
11.7 Sélection
Lorsque l’internaute sélectionne du texte dans un champ de texte. Le gestionnaire d’événement associé est onSelect.
Exemple 11.12 - onSelect
<input type="text" value="votre nom" name=”nom” onSelect=”alert(‘Vous avez sélectionné un champ’) ;">
Il est supporté par les 2 balises de texte, c’est-à-dire <input type="text"> et y.
11.8 Envoi
Lorsque l’internaute clique sur un bouton submit d’un formulaire de type « post » ou « get ». Le gestionnaire d’événement est alors onSubmit.
Exemple 11.13 - onSubmit
<input type="submit" value="Envoyer" name=”envoi” onSubmit=”alert(‘C’est parti !’) ;">
Il est supporté uniquement par la balise <input type="submit">.
Lorsque l’internaute clique sur un bouton reset d’un formulaire. Son gestionnaire d’événement est onReset.
Exemple 11.14 - onReset
<input type="reset" value="Effacer" name=”effacer” onSubmit=”alert(‘On efface tout !’) ;">
Il est supporté uniquement par la balise <input type="reset">.
11.10 Objet document
Avant de voir les évènements, l’intérêt de l’accès aux éléments à travers l’objet document était discutable. Maintenant, on voit qu’il est possible de changer des valeurs selon des évènements, ce qui est très intéressant. Il est aussi possible de demander confirmation, de demander si on veut vraiment changer la valeur… Tout est permis. Cette partie ne comporte pas d’exemple, car la section suivante en présente un assez complet.
11.11 Exemple concret
Voici un exemple – parmi tant d’autres – de ce que pourrait être un formulaire interactif, avec tous les évènements auxquels on peut penser.