SELFHTML/Aides à la navigation JavaScript/DOM Référence objet| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
 |
event |
|
Propriétés:
|
 | |
Avec l'objet event vous pouvez rechercher et traiter des informations distinctes sur les événements utilisateur comme des clics de souris ou des entrées clavier. Ainsi par exemple, vous pouvez, pour un clic de souris, rechercher la position exacte où le clic de souris a eu lieu ou bien demander pour une entrée clavier quelle touche a été appuyée.
Vous pouvez surveiller des événements utilisateur soit en notant un 
gestionnaire d'événement dans un repère HTML autorisé, soit en programmant directement avec JavaScript une surveillance d'événement. Pour le cas où l'événement surveillé arrive, vous pouvez écrire une fonction de traitement qui "gère" l'événement, donc le traite. La fonction de traitement est appelée automatiquement quand l'événement arrive. Dans une fonction de traitement existe également la possibilité de questionner les propriétés de l'événement survenu. Ce sont ces propriétés qui sont décrites sur cette page.
Aussi bien Netscape 4.x que l'Explorer Internet MS 4.x connaissent l'objet event. Cependant, l'adaptation est malheureusement résolue de façon complètement différente et mène à une situation assez chaotique dans ce domaine. Les propriétés de l'objet event qui sont décrites dans cette page prennent les deux navigateurs en considération. En règle générale une propriété n'est cependant disponible soit que pour Netscape, soit que pour l'Explorer Internet MS. Même les syntaxes pour la surveillance d'événements divergent pour les deux navigateurs. Cela vaut aussi bien pour la surveillance d'événements par gestionnaire d'événement en HTML que pour la surveillance directe d'événements en JavaScript. Les différences pour les gestionnaires d'événement sont décrites plus en détail dans la partie traitant des gestionnaires d'événement. Ici n'est abordée que l'utilisation générale de l'objet event, afin de programmer, à l'aide de JavaScript, une surveillance d'événements directe. L'exemple montre aussi comment vous pouvez programmer une telle surveillance d'événements pour les deux navigateurs sans aboutir à une annonce d'erreur.
<html><head><title>Test</title>
<script language="JavaScript1.2" type="text/javascript">
<!--
var Netscape = new Boolean();
if(navigator.appName == "Netscape") Netscape = true;
function touche_enfoncee(evenement)
{
if(Netscape)
{ window.status = "touche avec la valeur décimale " + evenement.which + " appuyée"; return true; }
}
function touche_relachee(evenement)
{
if(Netscape)
{ window.status = "touche avec la valeur décimale " + evenement.which + " relâchée"; return true; }
}
document.onkeydown = touche_enfoncee;
document.onkeyup = touche_relachee;
//-->
</script>
<!-- passage JScript pour l'Explorer Internet MS -->
<script for="document" event="onkeydown()" language="JScript" type="text/jscript">
<!--
{ window.status = "touche avec la valeur décimale " + window.event.keyCode + " appuyée"; return true; }
//-->
</script>
<script for="document" event="onkeyup()" language="JScript" type="text/jscript">
<!--
{ window.status = "touche avec la valeur décimale " + window.event.keyCode + " relâchée"; return true; }
//-->
</script>
</head><body>
</body></html> |
L'exemple surveille des événements clavier au niveau du document. Ce qui signifie que si l'utilisateur clique dans le domaine d'affichage du fichier HTML affiché (le document devient actif), et qu'ensuite il appuie une touche quelconque, l'événement sera capté et traité par la surveillance d'événement programmée. Dans l'exemple, à chaque fois qu'une touche est appuyée sera sortie dans la barre d'état du navigateur le code décimal de la touche appuyée.
Pour réaliser une telle chose pour Netscape 4.x et l'Explorer Internet MS 4.x ont été définis dans l'exemple un passage JavaScript ainsi que deux passages spéciaux JScript. Les passages JScript ne sont lus que par l'Explorer Internet MS, étant donné que Netscape ignore les passages scripts marqués avec language="JScript". Le passage JavaScript est marqué avec language="JavaScript1.2". Ainsi on évite que des navigateurs plus anciens (par exemple Netscape 3) interprètent ce passage. Le passage sera cependant interprété par Netscape 4 et par l'Explorer Internet MS 4. Il est pourtant conçu pour Netscape 4. C'est pourquoi toutes les instructions dans le passage dépendent de la question si Netscape est en service.
Deux fonctions sont définies: la fonction touche_enfoncee(evenement) est la fonction de traitement proprement dite pour le cas où l'utilisateur appuie sur une touche. La fonction touche_relachee(evenement) traite le cas où l'utilisateur relâche la touche appuyée. Les deux fonctions attendent un paramètre nommé evenement. Par ce paramètre les fonctions peuvent accéder aux propriétés de l'objet event. Dans les deux fonctions de l'exemple la propriété objet which est testée. Elle permet d'après la syntaxe Netscape de sauvegarder le code décimal clavier d'une touche appuyée.
Cela seul ne suffit pas pour assurer la surveillance de l'événement. Pour que les fonctions de traitement soient automatiquement appelées lorsque l'événement survient, la surveillance d'événement doit être démarrée. C'est à cela que servent les deux instructions à la fin du passage JavaScript.
Avec document.onkeydown = touche_enfoncee; l'événement "touche enfoncée" (onkeydown) sera surveillé. Derrière le signe égal suit le nom de la fonction de traitement, qui doit traiter cet événement (touche_enfoncee). Veillez à ce que soit noté ici le seul nom de la fonction et non pas un appel de fonction suivi de parenthèses.
Avec document.onkeyup = touche_relachee; l'événement "touche relâchée" (onkeyup) est surveillé, et pour le traitement de l'événement la fonction de traitement touche_relachee est mentionnée. D'après le même schéma, vous pouvez surveiller aussi d'autres événements - définissez vous même les fonctions de traitement et au lieu de onkeydown et onkeyup vous pouvez noter tous les autres gestionnaires d'événements habituels.
Pour les deux passages Script pour l'Explorer Internet MS est noté un passage script pour chacun des événements à surveiller. Avec une mention telle que for="document" event="onkeydown()" dans le repère d'ouverture <script> mentionnez quel événement vous voulez surveiller (par exemple onkeydown), et pour quel objet (par exemple document). Tous les gestionnaires d'événements habituels sont permis.
Dans le script vous pouvez alors accéder aux propriétés de l'objet event, que connaît l'Explorer Internet MS. Avec window.event.keyCode, par exemple, le code décimal clavier d'une touche appuyée est recherché.
Cet exemple est également interprété par Netscape 6 correspondant à la syntaxe spécifique à Netscape.
 |
altKey, ctrlKey, shiftKeySyntaxe Microsoft. Sauvegarde si des touches supplémentaires comme la touche ALT ou la touche majuscule ou la touche Ctrl ont été appuyées en même temps qu'une autre touche ou qu'un clic de souris.
<html><head><title>Test</title>
<script for="document" event="onkeypress()" language="JScript" type="text/jscript">
<!--
{
if(window.event.shiftKey)
alert("Une touche a été appuyée avec la touche majuscule!");
}
//-->
</script>
</head><body>
</body></html>
|
Dans l'exemple est surveillé si l'utilisateur appuie sur une touche (onkeypress). Si oui, il est demandé s'il a en plus appuyé sur la touche majuscule. Dans ce cas, une annonce appropriée sera sortie.
|
|
clientX, clientYSyntaxe Microsoft. Sauvegarde la position horizontale en pixels (clientX) et la position verticale en pixels (clientY) du curseur par rapport au coin supérieur gauche de la fenêtre d'affichage, si par exemple des événements souris sont surveillés.
<html><head><title>Test</title>
<script for="document" event="onmousedown()" language="JScript" type="text/jscript">
<!--
{
document.all.sauteur.style.left = window.event.clientX;
document.all.sauteur.style.top = window.event.clientY;
}
//-->
</script>
</head><body>
<div id="sauteur" style="background-color:#FFE0FF; position:absolute;
top:100px; left:100px; width:100px; height:100px;"></div>
</body></html>
|
L'exemple contient un passage <div> qui a été positionné de façon absolue à l'aide de mentions de feuilles de style. Si l'utilisateur clique avec la souris dans la fenêtre le passage sera déplacé à l'endroit où a eu lieu le clic de souris.
|
|
keyCodeSyntaxe Microsoft. Sauvegarde lors d'événements clavier le code décimal de la touche appuyée (code ASCII/ANSI).
<html><head><title>Test</title>
<script for="document" event="onmousedown()" language="JScript" type="text/jscript">
<!--
{
alert(window.event.keyCode);
}
//-->
</script>
</head><body>
</body></html>
|
L'exemple surveille si, quand le document est actif, une touche a été appuyée. Si oui sa valeur est sortie dans une boite de dialogue.
|
|
layerX, layerYSyntaxe Netscape. Sauvegarde la largeur actuelle (layerX) et la hauteur (layerY) d'un objet, quand l'événement onresize est surveillé, ou bien la position (relative) du curseur horizontalement en pixels (layerX) et verticalement en pixels (layerY) par rapport au coin supérieur gauche d'un passage calque quand par exemple les événements souris sont surveillés.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function wResize(evenement)
{
window.status = evenement.layerX + "x" + evenement.layerY; return true;
}
window.onresize = wResize;
//-->
</script>
</head><body>
</body></html>
|
L'exemple surveille si l'utilisateur modifie la fenêtre d'affichage du navigateur. Lorsque la taille de la fenêtre d'affichage est modifiée, la fonction de traitement wResize est appelée aussi souvent que possible. Elle écrit dans la barre d'état du navigateur la taille actuelle de la fenêtre.
Netscape 6.1 interprète certes le gestionnaire d'événement, pourtant c'est la valeur 0 qui est toutefois sauvegardée dans les propriétés layerX et layerY.
|
|
modifiersSyntaxe Netscape. Sauvegarde si des touches supplémentaires comme la touche ALT ou la touche majuscule ont été appuyées en même temps qu'une autre touche ou qu'un clic de souris.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function valeur_ALT(evenement)
{
if(evenement.modifiers & Event.ALT_MASK)
alert("Clic de souris et touche ALT appuyée!")
}
document.onmouseup = valeur_ALT;
//-->
</script>
</head><body>
</body></html>
|
Dans l'exemple la boite de dialogue est affichée quand l'utilisateur clique avec la souris dans le document tout en maintenant la touche ALT appuyée. La syntaxe employée utilise des opérateurs Bit. Posez la requête simplement comme dans l'exemple. Les expressions suivantes sont autorisées::
evenement.modifiers & Event.ALT_MASK, requête pour la touche ALT
evenement.modifiers & Event.CONTROL_MASK, requête pour la touche Ctrl (touche Strg)
evenement.modifiers & Event.SHIFT_MASK, requête pour la touche majuscules
evenement.modifiers & Event.META_MASK, , requête pour la touche ALT-Gr
Ces mentions dépendent naturellement si le clavier utilisé dispose d'une telle touche .
Netscape 6.1 n'interprète pas cet exemple.
|
|
offsetX, offsetYSyntaxe Microsoft. Sauvegarde la position horizontale en pixels (offsetX) et la position verticale en pixels (offsetY) du curseur par rapport au coin supérieur gauche de l'élément qui a déclenché un événement.
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
function Coords()
{
alert("Emplacement sur le bouton: " + window.event.offsetX + "/" + window.event.offsetY);
}
//-->
</script>
</head><body>
<form action="">
<input type="button" value="Clique donc sur moi" onClick="Coords()">
</form>
</body></html>
|
L'exemple contient un formulaire avec un bouton. En cliquant sur le bouton la fonction Coords() est appelée. Celle ci donne les coordonnées relatives en pixels du clic de souris par rapport au coin supérieur gauche de l'élément donc du bouton.
|
|
pageX, pageYSyntaxe Netscape. Sauvegarde la position relative horizontale en pixels (pageX) et verticale en pixels (pageY) du curseur par rapport du coin supérieur gauche de la page quand par exemple les événements souris sont surveillés.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function LayerPos(evenement)
{
if (document.layers) {
document.layers[0].left = evenement.pageX;
document.layers[0].top = evenement.pageY;
}
else if (window.netscape) {
document.getElementsByTagName("div")[0].style.left = evenement.pageX;
document.getElementsByTagName("div")[0].style.top = evenement.pageY;
}
}
document.onmouseup = LayerPos;
//-->
</script>
</head><body>
<div style="position:absolute;top:50px;left:50px;width:100px;height:100px;
background-color:#FFE0FF;border:solid 1px #000000;">
Un calque<br><br>
</div>
</body></html>
|
L'exemple contient un calque simulé. Si l'utilisateur clique dans la fenêtre et relâche ensuite la touche de souris le layer est déplacé la où la touche de souris a été relâchée.
Étant donné que les propriétés pageX et pageY sont également interprétées par Netscape 6, l'exemple a été structuré pour qu'il soit compatible et éloquent.
À la place d'un calque (Netscape 6 ne connaît plus les calques) on a simulé un calque sans élément layer avec un passage div positionné de façon absolue. Quand la touche de souris est appuyée et relâchée, la fonction LayerPos() est appelée. Dans cette fonction, il est vérifié si le navigateur connaît l'objet layer. Si c'est le cas, l'affectation de valeur se fait par l'objet Layer. C'est cet embranchement d'instruction qui sera suivi par Netscape 4.x. Si le navigateur ne connaît pas l'objet par contre, alors il sera vérifié dans l'embranchement else s'il connaît l'objet window.netscape. Étant donné que cet objet n'est connu que par les navigateurs Netscape, L'Explorer Internet MS et Opera seront exclus. Enfin intervient l'affectation de la propriété à l'élément d'après la syntaxe DOM. Les deux embranchements de l'instruction if/-else utilisent néanmoins les mêmes propriétés Event.
|
|
screenX, screenYSyntaxe Netscape. Sauvegarde la position absolue horizontale en pixels (screenX) et verticale en pixels (screenY) sur l'écran quand par exemple les événements souris sont surveillés.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Position(evenement)
{
alert("valeur x: " + evenement.screenX + " / valeur y: " + evenement.screenY);
}
document.onmousedown = Position;
//-->
</script>
</head><body>
</body></html>
|
L'exemple surveille si l'utilisateur clique avec la souris. Si oui, une boite de dialogue sortira les coordonnées absolues sur l'écran de l'endroit où il a cliqué.
Cet exemple est également interprété par Netscape 6.
|
|
whichSyntaxe Netscape. Sauvegarde pour des événements clavier le code décimal de la touche appuyée (code ASCII/ANSI) et pour des événements souris la touche qui a été appuyée.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Position(evenement)
{
alert("touche_souris: " + evenement.which);
}
document.onmousedown = Position;
//-->
</script>
</head><body>
</body></html>
|
L'exemple surveille si l'utilisateur appuie sur une touche souris. Si oui, une boite de dialogue sortira quelle touche a été appuyée. La touche gauche a la valeur 1, celle du milieu (si elle existe) la valeur 2 et la droite (si elle existe) la valeur 3.
Cet exemple est également interprété par Netscape 6.
|
|
typeSyntaxe Netscape. Sauvegarde quel événement est survenu. La valeur sauvegardée est le nom de l'événement sans le préfixe on, donc par exemple mouseup ou keypress ou select.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function estimation(evenement)
{
alert("evenement: " + evenement.type);
}
document.onmouseup = estimation;
document.onkeyup = estimation;
//-->
</script>
</head><body>
</body></html>
|
L'exemple surveille deux événements à savoir si l'utilisateur appuie sur une touche de souris ou sur une touche du clavier. Dans les deux cas, c'est la même fonction de traitement estimation qui est appelée. Elle donne dans une boite de dialogue lequel des événements est survenu.
Cet exemple est également interprété par Netscape 6.
|
|
x, ySauvegarde la position relative horizontale en pixels (x) et verticale en pixels (y) du curseur par rapport au coin supérieur gauche de l'élément parent de l'élément ayant déclenché l'événement. Si un passage positionné de façon absolue est l'élément parent, c'est le coin supérieur gauche de ce passage qui sera la référence. Si l'élément déclencheur n'a pas d'élément parent, c'est le coin supérieur gauche du document qui vaudra comme référence.
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
function Coords()
{
alert("x = " + window.event.x + "/ y = " + window.event.y);
}
//-->
</script>
</head><body>
<div style="position:relative; left:50px; top:140px;
background-color:#FFFFE0; width:100px">
<p onClick="Coords()">Clique moi</p>
</div>
</body></html>
|
L'exemple comprend un passage positionné de façon absolue (<div>...</div>) dans lequel se trouve un paragraphe ordinaire. En cliquant sur le paragraphe, la fonction Coords() est appelée. Celle ci donne les coordonnées en pixels du clic de souris. À vrai dire les valeurs devraient se référer au coin supérieur gauche du passage <div>.
Les versions de l'Explorer Internet antérieures à la version 5 sauvegardent dans ces propriétés la position relative à la fenêtre. À partir de l'Explorer Internet MS 5.0 la position par rapport à un élément parent positionné de façon relative (par exemple des cellules de tableau) est sauvegardée dans cette propriété . pour des éléments parents positionnés de façon absolue par contre, la propriété contient à nouveau la position par rapport à la fenêtre.
|
| |
 |
history
|
 |
links
|
| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
