Langage JavaScriptObjet Event
L'objet JavaScript Event
Les méthodes de l'objet eventPermet d'obtenir des informations à propos des évènements déclenchés par les actions de l'utilisateur.
- event.initEvent : utilisé pour initialiser la valeur d'un évènement dans le document.
- event.initMouseEvent : pour initialiser la valeur d'un évènement de la souris.
- event.initUIEvent : pour initialiser un évènement UI.
- event.preventDefault : Annule un évènement (si il est supprimable).
- event.stopPropagation : Stops la propagation de l'évènement.
Les propriétés de l'objet eventAttention, les propriétés de l'objet event ne sont utilisable que soit pour Netscape et Firefox (Mozilla), soit que pour Microsoft Internet Explorer.
- altKey, ctrlKey, shiftKey : touches particulières (Microsoft)
- clientX, clientY : coordonnées écran (Microsoft)
- keyCode : code clavier (Microsoft)
- layerX, layerY : coordonnées relatives à l'objet (Netscape/Firefox)
- modifiers : touches particulières (Netscape/Firefox)
- offsetX, offsetY : coordonnées relatives à l'objet (Microsoft)
- pageX, pageY : coordonnées relatives à la fenêtre (Netscape/Firefox)
- screenX, screenY : coordonnées écran (Netscape/Firefox)
- which : code clavier et souris (Netscape/Firefox)
- type : type de l'événement (Netscape/Firefox)
- x,y : coordonnées relatives à l'élément parent (Microsoft)
Exemple d'utilisation avec la propriété keyCode
Retourne le code ASCII des touches clavier
Code valable sous Microsoft Internet Explorer (sinon utilisez la propriété which)
<head>
<script>
function retrouve_latouche() {
// si évênement clavier
if (window.event.type == "keypress" & window.event.keyCode > 0) {
// on récupère la valeur dans le champ "touche"
document.getElementById("touche").value = window.event.keyCode;
}
return true; }
document.onkeypress = retrouve_latouche;
</script>
</head>
<body>
Touche clavier: <input type="text" id="touche" size="5" readonly="readonly" style="border:0px;">
</body>Exemple (appuyez sur une touche de votre clavier):
Note sur ce résultat: Est utilisé ci-dessus un champ texte avec l'attribut readonly qui permet d'empécher la saisie ainsi qu'un style (border:0px) qui efface les bordures. Pour info: le code ASCII (American Standard Code for Information Interchange) des touches clavier est codé sur 7 bits (soit 128 caractères possibles codés de 0 à 127).
Exemple d'utilisation avec les propriétés offsetX, offsetY et e.pageX, e.pageY
Javascript permet de savoir où se trouve le curseur, pour par exemple, agir sur d'autres éléments de la page. On utilise pour cela les propriétés offsetX et offsetY pour Microsoft IE et les propriétés e.pageX et e.pageY pour Netscape et Mozilla
<script>
if (document.layers) { document.captureEvents(Event.MouseMove); }
// affectation de la fonction "deplacerCurseur" à l'évènement onmousemove
document.onmousemove = deplacerCurseur;
// affichage des coordonnées du curseur dans les cases du formulaire
function afficherCurseur(x, y) {
with (document.form_test) { curseurX.value = x; curseurY.value = y; }
}
// Cette fonction appelle afficherCurseur à chaque mouvement de la souris
function deplacerCurseur(e) {
// avec IE, on utilise l'objet "event"
if (document.all) afficherCurseur(event.offsetX, event.offsetY);
// avec Netscape, Mozilla, on utilise l'évènement "e" en argument
else afficherCurseur(e.pageX, e.pageY);
} </script>
<form name="form_test">Position de votre souris:<br />
X : <input type="text" name="curseurX" size="6" />
Y : <input type="text" name="curseurY" size="6" />
</form>
Javascript permet de savoir où se trouve le curseur, pour par exemple, agir sur d'autres éléments de la page. On utilise pour cela les propriétés offsetX et offsetY pour Microsoft IE et les propriétés e.pageX et e.pageY pour Netscape et Mozilla
<script>
if (document.layers) { document.captureEvents(Event.MouseMove); }
// affectation de la fonction "deplacerCurseur" à l'évènement onmousemove
document.onmousemove = deplacerCurseur;
// affichage des coordonnées du curseur dans les cases du formulaire
function afficherCurseur(x, y) {
with (document.form_test) { curseurX.value = x; curseurY.value = y; }
}
// Cette fonction appelle afficherCurseur à chaque mouvement de la souris
function deplacerCurseur(e) {
// avec IE, on utilise l'objet "event"
if (document.all) afficherCurseur(event.offsetX, event.offsetY);
// avec Netscape, Mozilla, on utilise l'évènement "e" en argument
else afficherCurseur(e.pageX, e.pageY);
} </script>
<form name="form_test">Position de votre souris:<br />
X : <input type="text" name="curseurX" size="6" />
Y : <input type="text" name="curseurY" size="6" />
</form>
