SELFHTML/Quickbar
JavaScript
Référence objet SELFHTML/Quickbar
JavaScript
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 cliquements de souris ou des entrées clavier. Ainsi par exemple, vous pouvez, pour un cliquement de souris, rechercher la position exacte où le cliquement 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 
Event-Handler
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. 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 la syntaxe pour la surveillance d'évènements divergent pour les deux navigateurs. Cela vaut aussi bien pour la surveillance d'évènements par Event-Handler en HTML que pour la surveillance directe d'évènements en JavaScript. Les différences pour les Event-Handlers sont décrites plus en détail dans la partie traitant des Event-Handlers. 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">
var Netscape = new Boolean();
if(navigator.appName == "Netscape") Netscape = true;
function toucheenfoncee(evenement)
{
if(Netscape)
{ window.status = "La touche avec la valeur décimale " + evenement.which + " a été appuyée"; return true; }
}
function toucherelachee(evenement)
{
if(Netscape)
{ window.status = "La touche avec la valeur décimale " + evenement.which + " a été relâchée"; return true; }
}
document.onkeydown = toucheenfoncee;
document.onkeyup = toucherelachee;
</script>
<!-- passage JScript pour l'explorer Internet MS -->
<script for=document event="onkeydown()" language="JScript">
{ window.status = "La touche avec la valeur décimale " + window.event.keyCode + " a été appuyée"; return true; }
</script>
<script for=document event="onkeyup()" language="JScript">
{ window.status = "La touche avec la valeur décimale " + window.event.keyCode + " a été relâchée"; return true; }
</script>
<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 toucheenfoncee(evenement) est la fonction de traitement proprement dite pour le cas où l'utilisateur appuie sur une touche. La fonction toucherelachee(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 = toucheenfoncee; 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 (toucheenfoncee).
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 = toucherelachee; l'évènement "touche
relâchée " (onkeyup) est surveillé, et pour le traitement de
l'évènement la fonction de traitement toucherelachee 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 Event-Handler
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 Event-Handler 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é.
|
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">
{
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">
{
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 cliquement 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="onkeypress()" language="JScript">
{
alert(window.event.keyCode);
}
</script>
</head><body>
</body></html>
|
L'exemple surveille si, document actif supposé, 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 layer quand par exemple les évènements souris sont surveillés.
<html><head><title>Test</title>
<script language="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.
|
|
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 language="JavaScript">
function valeuralt(evenement)
{
if(evenement.modifiers & Event.ALT_MASK)
alert("Cliquement de souris et touche ALT appuyée!")
}
document.onmouseup = valeuralt;
</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.
|
|
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">
function Coords()
{
alert("Emplacement sur le bouton: " + window.event.offsetX + "/" + window.event.offsetY);
}
</script>
</head><body>
<form>
<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 cliquement 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 language="JavaScript">
function poslayer(evenement)
{
document.layers[0].left = evenement.pageX;
document.layers[0].top = evenement.pageY;
}
document.onmouseup = poslayer;
</script>
</head><body>
<layer top=50 left=50 width=100 height=100 bgcolor=#FFE0FF></layer>
</body></html>
|
L'exemple contient un layer. 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.
|
|
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 language="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é.
|
|
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 language="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.
|
|
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 language="JavaScript">
function estimation(evenement)
{
alert("Évènement: " + 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.
|
|
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">
function Coords()
{
alert("x = " + window.event.x + "/ y = " + window.event.y);
}
</script>
</head><body>
<div style="position:absolute; left:10px; top:140px;
background-color:#FFFFE0">
<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 cliquement de souris. À vrai dire les valeurs devraient se référer au coin supérieur gauche du passage <div>. Lors du test ce ne fut pourtant pas le cas, elle se référaient à la fenêtre d'affichage.
|
| |
après: |
history
|
avant: |
links
|
SELFHTML/Quickbar
JavaScript
Référence objet
Serge François, 13405@free.fr