SELFHTML/Aides à la navigation JavaScript/DOM Éléments du langage JavaScript| SELFHTML/Aides à la navigation JavaScript/DOM Éléments du langage JavaScript |
 |
Gestionnaires d'événements |
|
|
 | |
Les Event-Handler (gestionnaires d'événement) sont un maillon important entre HTML et JavaScript. Les gestionnaires d'événements sont notés sous forme d'attributs dans des repères HTML. Étant donné qu'il s'agit de parties intégrantes qui apparaissent en HTML, le consortium W3 les a entre temps acceptés dans le standard HTML (voir aussi 
attributs universels: 
Gestionnaire d'événements pour les scripts). Là est également fixé dans quels repères HTML quel gestionnaire d'événements peut-il apparaître. Le problème est cependant que la pratique actuelle s'en éloigne largement - tout au moins en ce qui concerne Netscape. L'Explorer Internet MS 4.x, par contre, interprète les gestionnaires d'événements de façon presque aussi universelle que celle prévue par le consortium W3. Lors des descriptions des gestionnaires d'événements sur cette page, on essaiera à chaque fois d'aborder la problématique. En fin de compte il n'y a cependant qu'un moyen: tester et essayer soi-même au cas par cas - avec différents navigateurs.
Vous reconnaissez les gestionnaires d'événements à ce que ces attributs HTML commencent toujours par on par exemple onClick=. Derrière le signe égal, notez entre guillemets une instruction JavaScript. Si vous voulez exécuter plusieurs instructions, définissez alors pour le mieux dans un passage JavaScript une fonction et appelez cette fonction derrière le signe égal, par exemple onClick="calculer()".
Chaque gestionnaire d'événement correspond à un certain événement chez l'utilisateur, onClick= par exemple pour l'événement "l'utilisateur a cliqué avec la souris". Le domaine d'affichage de l'élément HTML dans lequel le gestionnaire d'événement est noté en est l'élément déclencheur. Si le gestionnaire d'événement onClick= par exemple est noté dans un bouton de formulaire, le code JavaScript qui y est relié ne sera exécuté que si le cliquement de souris se passe dans le domaine d'affichage de cet élément. Cela peut vous paraître évident... Ça l'est aussi, tant qu'il s'agit par exemple de boutons de formulaire. Mais d'après le modèle élargi de HTML 4.0, un passage HTML défini par <div>...</div> peut par exemple aussi contenir un gestionnaire d'événement comme onClick=.
N'ont été pris en compte que les gestionnaires d'événement qui peuvent réellement être mentionnés dans des repères HTML, et qui sont mentionnés dans le standard HTML-4.0 (à l'exception de onAbort= et de onError=). Cela en fait moins que tous ceux que connaissent Netscape et l'Explorer Internet MS. Chez Netscape s'ajoute à la confusion le fait que quelques gestionnaires d'événement sont bien décrits comme tels mais ne peuvent pas du tout être mentionnés dans des repères HTML. Il faut espérer qu'à l'avenir, il y aura à ce sujet davantage de conformité entre les standards de langages et les implémentations de navigateurs.
|
onAbort (en cas d'interruption)Est prévu pour le cas où un utilisateur appuie sur le bouton stop du navigateur, alors que tous les graphiques ne sont pas encore chargés.
D'après JavaScript (Netscape) est permis dans le repère suivant:
<img>
Exemple d'affichage: aperçu (à l'appel, appuyer tout de suite sur ESC!)
<html><head><title>Test</title>
</head><body>
<img src="onabort.jpg" width="400" height="600" alt="graphique"
onAbort="alert('Dommage que vous ne vouliez pas voir le graphique')">
</body></html>
|
Dans l'exemple un graphique est référencé en HTML. Au cas où l'utilisateur appuie sur le bouton stop du navigateur avant que le graphique ne soit tout à fait chargé, un message sortirait avec alert().
Ce gestionnaire d'événement ne fait pas partie du standard HTML et n'est pas interprété par Netscape 6 ni par Opera 5.
|
|
onBlur (en quittant)Au cas où l'utilisateur quitte maintenant un élément qui était activé.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<body> <frameset> <input> <layer> <select> <textarea>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <area> <button> <input> <label> <select> <textarea>
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
Nom: <input type="text" name="saisie" onBlur="verifcontenu(this.value)"><br>
ne rien entrer, puis cliquer ailleurs!
</form>
<script type="text/javascript">
document.Test.saisie.focus();
function verifcontenu(champ)
{
if(champ == "") {
alert("Le champ nom doit avoir un contenu!");
document.Test.saisie.focus();
return false;
}
}
</script>
</body></html>
|
Dans l'exemple est défini un formulaire contenant un champ de saisie. Sous le formulaire est noté un passage JavaScript. Le passage est défini sous le formulaire parce qu'au début du passage est exécutée une instruction qui nécessite l'existence du formulaire.. Cette instruction (document.Test.saisie.focus();) place le curseur dans le champ de saisie. Là, l'utilisateur doit entrer son nom. S'il clique ailleurs, le gestionnaire d'événement onBlur noté dans le repère HTML du champ de saisie devient actif. À ce moment la fonction verifcontenu() elle aussi notée dans le passage JavaScript, est appelée. Cette fonction demande si la chaîne de caractères (le contenu du champ pour entrer le nom) qui lui est transmise est vide. Si oui, une fenêtre de dialogue apparaît et le curseur est replacé dans le champ.
Avec Opera 5.02 l'application de cet exemple crée une boucle sans fin, étant donné que la confirmation de la fenêtre de dialogue déclenche elle aussi le gestionnaire d'événement: Le problème a été résolu avec Opera 5.12.
|
|
onChange (après modification réussie)Au cas où un élément a reçu une valeur modifiée.
D'après HTML 4.0 et JavaScript 1.2 (Netscape) est permis dans les repères HTML suivants:
<input> <select> <textarea>
<html><head><title>Test</title> </head><body> <form name="Test" action=""> <textarea rows="5" cols="40" onChange="alert(this.value)">Modifiez ce texte et cliquez ailleurs!</textarea> </body></html> |
Dans l'exemple est défini un formulaire avec un champ de saisie de plusieurs lignes. Si l'utilisateur entre quelque chose et clique ensuite ailleurs, le gestionnaire d'événement onChange noté dans le repère HTML du champ de saisie de plusieurs lignes devient actif. Dans l'exemple le contenu modifié actuel du champ est simplement affiché dans une fenêtre de dialogue.
|
|
onClick (en cliquant)Au cas où l'utilisateur clique sur un élément.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<a> <area> <input> <textarea>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> </head><body> <form name="Test" action=""> <input size="30" name="sortie" readonly><br> <input type="button" value="Dernière mise à jour" onClick="this.form.sortie.value=document.lastModified"> </form> </body></html> |
Dans l'exemple est défini un formulaire avec un champ de saisie (qui cependant a été défini en lecture seule avec l'attribut "readonly") et un bouton. Le bouton porte l'inscription "Dernière mise à jour". En cliquant sur le bouton le gestionnaire d'événement onClick défini dans le repère HTML du bouton, devient actif. Dans l'exemple s'inscrit alors dans le champ de saisie la date de la dernière modification du document.
.
|
|
onDblClick (en double-cliquant)Au cas où l'utilisateur double-clique sur un élément.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<a> <area> <input> <textarea>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> </head><body> <form name="calculer" action=""> Valeur: <input size="10" name="valeur"> <input type="button" value="Double-clic = puissance 2" onDblClick="document.calculer.valeur.value=document.calculer.valeur.value*document.calculer.valeur.value"> </form> </body></html> |
Dans l'exemple est défini un formulaire avec un champ de saisie et un bouton. Dans le bouton est noté le gestionnaire d'événement onDblClick= Le bouton ne réagit de ce fait qu'au double-clic. Si l'utilisateur double-clique sur le bouton, le carré de la valeur qu'il a entrée dans le champ de saisie est calculée et inscrite à son tour dans ce champ.
Ce gestionnaire d'événement n'est pas disponible avec les navigateurs Netscape sous Macintosh ni avec Opera!
|
|
onError (en cas d'erreur)Est approprié pour capter les messages d'erreur et les remplacer par des messages personnalisés. Attention pourtant, les erreurs ne sont pas pour autant écartées!! onError est conçu avant tout pour traiter les erreurs intervenant lors du chargement de graphiques..
D'après JavaScript est permis dans le repère HTML suivant:
<img>
<html><head><title>Test</title>
</head><body>
<img src="yarien.gif" onError="alert('à cet endroit devait figurer un graphique,\n cependant il ne peut malheureusement pas être affiché!')">
</body></html>
|
Dans l'exemple est noté dans une une référence de graphique le gestionnaire d'événement onError= Il devient actif si le graphique n'existe pas ou ne peut pas être affiché: ici, une fenêtre de dialogue correspondante est alors affichée.
|
|
onFocus (en activant)Entre en action quand l'utilisateur active un élément.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<body> <frame> <input> <layer> <select> <textarea>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <area> <button> <input> <label> <select> <textarea>
<html><head><title>Test</title> </head><body> <form name="Test" action=""> <input size="30" onFocus="this.value='Entrez votre nom ici'"><br> <input size="30" onFocus="this.value='Entrez votre adresse ici'"><br> <input size="30" onFocus="this.value='Entrez votre âge ici'"><br> </form> </body></html> |
Dans l'exemple un formulaire est défini et contient trois champs de saisie. Étant donné que les champs ne portent pas d'inscription, l'utilisateur ne sait pas ce qu'il doit entrer dans les différents champs. Pourtant, s'il déplace le curseur par curiosité dans l'un des champs de saisie, le gestionnaire d'événement onFocus= du champ concerné deviendra actif. Alors s'inscrira dans le champ concerné une invite de ce qu'il faut y mettre.
|
|
onKeyDown (en appuyant sur une touche)Entre en action si l'utilisateur, alors qu'il a activé un élément, appuie sur une touche.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<input> <textarea>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title>
<script type="text/javascript">
function actualiser() {
document.Test.controle.value = document.Test.saisie.value.length + 1;
return true;
}
</script>
</head><body>
<form name="Test" action="">
Court descriptif de votre page d'accueil (max 50 caractères):<br>
<input type="text" name="saisie" size="40" onKeyDown="actualiser(this.value)">
<input type="text" value="0" readonly size="3" name="controle"><br>
<input type="reset">
</form>
</body></html>
|
Dans l'exemple un formulaire est défini dans lequel l'utilisateur peut entrer une courte description de sa page d'accueil. Le texte ne doit pas excéder 50 caractères. Pour que l'utilisateur n'ait pas à compter, il y a un champ de saisie dans lequel après chaque touche appuyée est affiché le nombre de caractères déjà entrés. Pour cela est noté dans le champ de saisie nommé saisie le gestionnaire d'événement onKeyDown= Il fait en sorte qu'aussi longtemps que l'utilisateur entre quelque chose dans le champ du formulaire, il appelle à chaque touche frappée la fonction actualiser() définie dans l'entête du fichier dans un passage Script. Cette fonction calcule avec document.Test.saisie.value.length + 1, combien de signes ont été entrés et écrit le résultat obtenu dans le champ prévu à cet effet "saisie".
|
|
onKeyPress (en maintenant une touche appuyée)
Entre en action quand l'utilisateur appuie sur une touche et la maintient appuyée.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<input> <textarea>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> </head><body> <form name="Test" action=""> <input type="text" size="30" name="saisie" onKeyPress="alert(this.value)"> </form> </body></html> |
Dans l'exemple un formulaire avec un champ de saisie est défini. Si l'utilisateur entre quelque chose dans le champ de saisie, une boite de dialogue est affichée à chaque touche appuyée avec la valeur ASCII du signe entré. Pour cela est noté dans le champ de saisie le gestionnaire d'événement onKeypress= Il entre en action quand une touche a été appuyée puis maintenue appuyée .
Avec Netscape 4.x et Opera 5 ce gestionnaire d'événement est toujours exécuté après le gestionnaire d'événement onKeyDown. Si le gestionnaire d'événement onKeyDown renvoie la valeur false, alors l'exécution du gestionnaire d'événement onKeyPress est empêchée sous Netscape. Avec l'Explorer Internet MS, c'est le gestionnaire d'événement onKeyPress qui empêche le gestionnaire d'événement onKeyDown.
Avec l'Explorer Internet MS vous pouvez en plus questionner les propriétés de l'objet event.
|
|
onKeyup (en relâchant la touche)Entre en action quand l'utilisateur appuie sur une touche et la relâche.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<input> <textarea>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> </head><body> <form name="Test" action=""> <input type="text" size="30" name="saisie" onKeyup="this.form.sortie.value=this.value"><br> <input type="text" readonly size="30" name="sortie"><br> <input type="reset"> </form> </body></html> |
Dans l'exemple est défini un formulaire avec deux champs de saisie appelés saisie et sortie. Si l'utilisateur entre quelque chose dans le champ supérieur, dans celui donc prévu pour l'entrée, le valeur sera reprise signe pour signe dans le champs du bas, dans celui donc prévu pour la sortie. Pour cela est noté dans le champ de saisie le gestionnaire d'événement onKeyup Ce gestionnaire d'événement entre en action si l'utilisateur a appuyé (dans le champ) une touche qu'il a relâchée - ce qui est le cas pour chaque signe entré. Avec this.form.sortie.value=this.value est affectée au champ de sortie la valeur actuelle du champ d'entrée.
|
|
onLoad (en chargeant un fichier)Entre en action quand un fichier HTML est chargé.
D'après JavaScript (Netscape) et HTML 4.0 est permis dans les repères HTML suivants:
<frameset> <body>
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function fenetre_navig() {
Navigation = window.open("navigat.htm","Navigation","height=100,width=300");
Navigation.focus();
}
// -->
</script>
</head>
<body onLoad="fenetre_navig()">
<h1>Page avec "télécommande"</h1>
</body></html>
|
<html><head><title>Test</title> </head><body> <a href="javascript:void(opener.location.href='../../../index.htm');">SELFHTML</a><br> <a href="javascript:void(opener.location.href='../../index.htm');">JavaScript</a><br> <a href="javascript:void(opener.location.href='../index.htm');">Éléments du langage JavaScript</a><br> </body></html> |
Dans l'exemple est ouverte, à la lecture du fichier HTML, une deuxième fenêtre, qui pourrait servir par exemple de "télécommande" de la fenêtre principale. Pour cela est noté dans le repère d'ouverture <body> le gestionnaire d'événement onLoad=. Il appelle la fonction fenetre_navig() qui est définie dans un passage JavaScript dans l'entête de fichier. Dans cette fonction se trouve la commande pour ouvrir la deuxième fenêtre. La fenêtre reçoit aussi tout de suite le Focus (devient fenêtre active), de façon à ce qu'elle soit visible en premier plan de la fenêtre principale. Dans cette deuxième fenêtre est chargé le fichier navigat.htm. Celui-ci contient des liens avec le "gestionnaire d'événement" javascript:. Lors de l'exécution de lien, une page est chargée dans la fenêtre parente de cette deuxième fenêtre, désignée par le nom de fenêtre réservé opener, avec document.location.href. L'instruction opener.location.href='../index.htm' retourne l'URI du fichier à charger. À l'aide de l'opérateur void celle-ci n'est pas retournée, ce qui évite des erreurs d'affichage.
|
|
onMousedown (en maintenant la touche de souris appuyée)Entre en action quand l'utilisateur maintient la touche de souris appuyée.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<input type="button"> <a>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
Exemple d'affichage: aperçu (cliquer sur le lien, maintenir la touche appuyée et observer la ligne d'état!)
<html><head><title>Test</title> </head><body> <a href="../../../index.htm" onMousedown="window.status='lien à la page de réception';return true;">lien</a> </body></html> |
L'exemple contient un lien. En cliquant sur le lien, la cible du lien, dans l'exemple donc ../../../index.htm, est appelée tout à fait normalement. Auparavant toutefois, dés que l'utilisateur a appuyé sur la touche et avant qu'il l'ait relâchée, le gestionnaire d'événement onMousedown= noté dans le repère du lien entre en action,. Dans l'exemple, s'inscrira dans la ligne d'état du navigateur: lien à la page de réception.
|
|
onMousemove (en bougeant la souris)Entre en action si l'utilisateur bouge la souris indépendamment du fait que la touche en soit appuyée ou non.
D'après JavaScript (Netscape) n'est pour l'instant pas possible dans des repères HTML mais seulement en relation avec l'objet event.
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
Exemple d'affichage: aperçu (bouger la souris sur le texte en observant la ligne d'état!)
<html><head><title>Test</title>
<script language="JavaScript">
function controlesouris(Element) {
var Pos = Element.offsetLeft + "/" + Element.offsetTop;
window.status = Pos;
return true;
}
</script>
</head><body>
<p onMousemove="controlesouris(this)">Ici un petit texte</p>
</body></html>
|
L'exemple montre comment le gestionnaire d'événement fonctionne également dans des repères HTML pour lesquels ce n'était jusqu'alors pas possible. Dans l'exemple a été défini un paragraphe de texte, dans lequel est noté le gestionnaire d'événement onMousemove=. Le gestionnaire d'événement entre en action aussi longtemps que l'utilisateur bouge la souris dans le domaine d'affichage du paragraphe. Alors est appelée aussi souvent que possible la fonction controlesouris() notée dans un passage Script de l'entête de fichier. L'élément concerné est transmis comme paramètre à la fonction au moyen de this. La fonction fait en sorte que les coordonnées de l'élément s'affichent dans la ligne d'état du navigateur.
Avec l'Explorer Internet MS vous pouvez en plus questionner les propriétés de l'objet event.
|
|
onMouseout (en quittant l'élément avec la souris)Entre en action quand l'utilisateur psse avec la souris sur un élément et le quitte ensuite.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<a> <area>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
Exemple d'affichage: aperçu (passer la souris sur le lien puis la retirer!)
<html><head><title>Test</title>
</head><body>
<a href="http://actuel.fr.selfhtml.org/nouvelles.htm"
onMouseout="alert('Vous devriez aller voir ce qu'il y a de neuf')"><b>Quoi de neuf?</b></a>
</body></html>
|
Dans l'exemple est défini un lien. Si l'utilisateur passe avec la souris sur le lien, sans cependant le cliquer, et s'éloigne à nouveau du lien, le gestionnaire d'événement onMousout= entre en action. Dans l'exemple apparaît alors une boite de dialogue incitant l'utilisateur à aller voir ce qu'il y a de neuf.
|
|
onMouseover (en passant sur l'élément avec la souris)
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<a> <area>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title> </head><body> <h1 id="Test" onMouseover="this.innerHTML='Vous voyez?'" onMouseout="this.innerHTML='Je suis dynamique'">Je suis dynamique</h1> </body></html> |
L'exemple montre comment les gestionnaires d'événement fonctionnent également dans des repères HTML, pour lesquels ce n'était jusqu'alors pas possible. L'exemple fonctionne avec l'Explorer Internet MS 4.x, et avec le navigateur Netscape à partir de la version 6, qui interprètent les gestionnaires d'événement pour une large mesure d'après HTML 4.0. Dans l'exemple est défini un titre N°1. Dans le titre sont notés les gestionnaires d'événement onMouseover= et onMouseout=. Le gestionnaire d'événement onMouseover= entre en action si l'utilisateur bouge la souris dans le domaine d'affichage du titre, et onMouseout= devient actif quand il quitte à nouveau le domaine d'affichage. À l'aide de this vous vous référez à l' objet actuel et vous pouvez changer le texte du titre au moyen de la propriété innerHTML à chaque activation de l'un des deux gestionnaires d'événement. Avec onMouseover= un autre texte est affiché, avec onMouseout= c'est à nouveau le texte d'origine.
Même Opera à partir de sa Version 5 interprète le gestionnaire d'événement d'après HTML 4.0. Il ne connaît cependant pas la propriété innerHTML.
|
|
onMouseUp (en relâchant la touche de souris)Entre en action quand l'utilisateur, après avoir appuyé la touche de souris, la relâche.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<input type="button"> <a>
D'après HTML 4.0 est permis dans les repères HTML suivants:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>
<html><head><title>Test</title>
</head><body>
<a href="../../../index.htm"
onMouseup="alert('Le spectacle commence MAINTENANT'); window.location.href='../../../index.htm'; return false">Lien</a>
</body></html>
|
Dans l'exemple est noté un lien. Si l'utilisateur clique le lien et relâche la touche, alors juste avant que la page à laquelle mène le lien soit chargée, une boite de dialogue s'ouvre et prévient encore solennellement l'utilisateur que le jeu va maintenant commencer. Pour cela, est noté dans le repère du lien le gestionnaire d'événement onMouseup= Quand il entre en action, une boite de dialogue est d'abord affichée. Après le fichier ../../../index.htm est chargé. L'instruction return false empêche que les navigateurs qui interprètent le gestionnaire d'événement
onMouseup= n'exécutent pas le lien location.href mais le lien normal noté pour l'attribut href.
|
|
onReset (en initialisant le formulaire)Entre en action quand l'utilisateur veut initialiser le formulaire..
D'après JavaScript (Netscape) est permis dans le repère HTML suivant:
<form>
<html><head><title>Test</title>
<script type="text/javascript">
function ResetCheck() {
var chk = window.confirm("Voulez vous effacer toutes les saisies?");
return(chk);
}
</script>
</head><body>
<form name="Test" onReset="return ResetCheck()" action=""><pre>
Nom: <input size="30"><br>
Idée: <input size="30"><br>
<input type="reset">
</pre></form>
</body></html>
|
L'exemple contient un formulaire avec entre autres un bouton annuler (Reset-button). En cliquant ce bouton, toutes les données dans le formulaire sont en principe effacées. Dans l'exemple, pourtant, est noté dans le repère d'ouverture <form> le gestionnaire d'événement onReset=. Celui-ci entre en action si le bouton Reset est cliqué. Ici est alors appelée la fonction ResetCheck() définie dans un passage Script dans l'entête de fichier. Cette fonction demande à l'utilisateur dans une fenêtre de confirmation (window.confirm()), s'il veut réellement effacer toutes les données du formulaire. S'il le confirme, la fenêtre de confirmation renvoie la valeur true S'il l'infirme, la valeur false est renvoyée. La valeur renvoyée est sauvegardée dans la variable chk et celle-ci est renvoyée à son tour par la fonction ResetCheck() au gestionnaire d'événement qui l'a appelée. L'effet en est que les données du formulaire ne sont effacées que si la valeur true est renvoyée.
|
|
onSelect (en sélectionnant du texte)Entre en action quand l'utilisateur sélectionne du texte.
D'après JavaScript (Netscape) et HTML 4.0est permis dans les repères HTML suivants:
<input> <textarea>
<html><head><title>Test</title> </head><body> <form name="Test" action=""> <textarea cols="40" rows="10" name="saisie" onSelect="window.status='Cliquez avec la touche droite de la souris sur le texte sélectionné!'; return true;">Sélectionnez simplement une partie de ce texte!</textarea> </form> </body></html> |
Dans l'exemple est défini un formulaire avec un champ de saisie, qui est est déjà occupé avec du texte . Si l'utilisateur essaie de sélectionner du texte dans le formulaire, on parvient grâce à onSelect à ce qu'un avis soit affiché dans la ligne d'état (window.status) indiquant à l'utilisateur ce qu'il doit faire.
Opera 5 et Netscape 4.x n'interprètent pas ces gestionnaires d'événement.
|
|
onSubmit (en envoyant le formulaire)Entre en action quand l'utilisateur envoie un formulaire.
D'après JavaScript (Netscape) permis dans le repère HTML suivant:
<form>
Exemple d'affichage: aperçu (ne pas remplir tous les champs, puis envoyer le formulaire!)
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function CheckInput() {
for(i=0; i<document.forms[0].elements.length; ++i)
if(document.forms[0].elements[i].value == "") {
alert("Tous les champs n'ont pas été remplis!");
document.forms[0].elements[i].focus();
return false;
}
return true;
}
//-->
</script>
</head><body>
<form action="onsubmit.htm" onSubmit="return CheckInput();">
Champ 1: <input size="30"><br>
Champ 2: <input size="30"><br>
Champ 3: <input size="30"><br>
<input type="submit">
</form>
</body></html>
|
L'exemple contient un formulaire avec plusieurs champs de saisie. Lors de l'envoi du formulaire, à savoir en cliquant sur le bouton prévu à cet effet, il est d'abord vérifié si l'utilisateur a entré quelque chose dans chaque champ. Si un champ a été laissé vide, le formulaire n'est pas envoyé. Au lieu de cela est affiché un message d'erreur, et le curseur est replacé dans le premier champ de saisie qui n'aura pas été rempli. À cet effet est noté dans le repère d'ouverture <form> le gestionnaire d'événement onSubmit=. En envoyant le formulaire, la fonction CheckInput() définie dans un passage Script de l'entête de fichier, est appelée. Cette fonction vérifie dans une boucle for tous les différents champs du formulaire, en cherchant s'ils ont un contenu vide (chaîne de caractères vide ""). Si c'est le cas, un message d'erreur est affiché et le curseur placé dans le champ de saisie correspondant. La valeur false est renvoyée au gestionnaire d'événement onSubmit qui a appelé la fonction. Ce n'est que lorsque tous les champs du formulaire sont remplis que la valeur true est renvoyée. C'est ce qui décide si le formulaire est envoyé ou non.
|
|
onUnload (en quittant le fichier)Entre en action quand l'utilisateur quitte un fichier HTML.
D'après JavaScript (Netscape) et HTML 4.0 est permis dans les repères HTML suivants:
<frameset> <body>
<html><head><title>Test</title>
<script type="text/javascript">
var Start = new Date();
var heuredebut = Start.getTime();
function sejour() {
var fin = new Date();
var heurefin = fin.getTime();
var sejour = Math.floor((heurefin - heuredebut) / 1000);
alert("Vous êtes restés " + sejour + " secondes sur cette page");
}
</script>
</head>
<body onUnload="sejour()">
<h1>Un long séjour sur cette page!</h1>
<p><a href="../../../index.htm"><b>Et puis ensuite partis!</b></a></p>
</body></html>
|
Dans l'exemple un passage JavaScript a été défini dans l'entête du fichier. Dés la lecture du fichier et grâce à l'objet Date l'heure actuelle est recherchée et sauvegardée dans la variable heuredebut. Dans le repère d'ouverture <body> du fichier, le gestionnaire d'événement onUnload= est noté. Il entre en action quand le fichier est quitté, par exemple après avoir cliqué sur un lien menant ailleurs. Dans ce cas, la fonction de l'exemple sejour() qui se trouve dans l'entête de fichier, est appelée. Cette fonction recherche l'heure actuelle et sort la différence entre l'heure de début sauvegardée et l' "heure de fin" dans une fenêtre de dialogue.
|
|
javascript: (pour les liens)Ce n'est pas un gestionnaire d'événement au sens propre du terme. Il s'agit d'une syntaxe qui a été introduite pour noter du code JavaScript comme cible d'un lien.
D'après JavaScript (Netscape) est permis dans les repères HTML suivants:
<a> <area>
<html><head><title>Test</title> </head> <body> <a href="javascript:alert(document.lastModified)"><b>Dernière mise à jour</b></a> </body></html> |
L'exemple sort, quand le lien est cliqué, une fenêtre de dialogue avec la date et l'heure de la dernière mise à jour. Pour noter un lien de ce genre, notez derrière l'attribut href= entre guillemets, le mot-clé javascript, suivi de deux points : et derrière d'une ou plusieurs instructions JavaScript. Pour plusieurs instructions, il est pourtant préférable de noter celles-ci dans une fonction et d'appeler cette fonction avec le lien..
Cette forme d'appel exige impérativement la valeur renvoyée undefined. Si ce n'était pas le cas, la valeur renvoyée correspondante de l'instruction JavaScript serait écrite dans le document en effaçant la page actuelle.
Le cas échéant, vous pouvez utiliser l'opérateur void pour empêcher que l'instruction renvoie une valeur et fixer sur undefined.
|
| |
 |
Remarques sur la référence objet JavaScript
|
 |
Mots réservés
|
| SELFHTML/Aides à la navigation JavaScript/DOM Éléments du langage JavaScript |
© 2001 Stefan Münz / © 2002 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org