Gestion
des événements en DHTML (2/3): Netscape 4.x
Les navigateurs n'ont pas forcément la même gestion des événements, piliers du DHTML. Quelles sont, exactement, les différences entre Netscape et IE ?
Capturer les événements
Cette opération s'effectue de la manière suivante:
document.captureEvents(Event.CLICK);
permet par exemple d'intercepter un clic de souris au sein de l'objet
"document". On aurait pu écrire aussi:
window.captureEvents(Event.KEYPRESS);
ou
layer.captureEvents(Event.DBLCLICK);
si désiré. Les objets "window", puis "document"
puis "layers" constituent la hiérarchie des
éléments qui peuvent, sous Navigator 4.x, capturer
un événement avant qu'il soit traité
par l'event handler (voir article
précédent), s'il existe, de l'élément
au sein duquel il s'est produit. On écrira ainsi, par exemple:
function maFonction(e) {
// code de la fonction
}
document.captureEvents(Event.CLICK);
document.onclick = maFonction;
Remarquons le paramètre "e" de la fonction que
nous définissons. La présence de ce paramètre
est facultative dans ce cas précis, mais nécessaire
si l'event handler est assigné à une balise
particulière.
Il est possible d'annuler le comportement par défaut de l'événement
en utilisant la méthode suivante:
function maFonction(e) {
return false;
}
document.captureEvents(Event.CLICK);
document.onclick = maFonction;
Transmission et redirection des événements
Un événement se produit au sein d'un élément
particulier de la hiérarchie. En eux-mêmes, ces éléments
peuvent intercepter les événements (on peut
leur assigner un event handler), mais il est possible de
les capturer à un niveau supérieur, comme nous venons
de le voir, et les transmettre aux éléments
concernés. Une méthode existe pour cela: routeEvent().
Ainsi, le code suivant:
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="ok">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
function documentHandler(e) {
alert('Evenement au niveau du document.');
routeEvent(e);
alert('Evenement de nouveau au niveau du document.');
}
function clickHandler(e) {
alert('Evenement transmis au niveau du bouton de formulaire.')
}
document.captureEvents(Event.CLICK);
document.onclick = documentHandler;
document.forms[0].elements[0].onclick = clickHandler;
// -->
</SCRIPT>
</BODY>
produit la page suivante,
qui permet d'illustrer le fonctionnement de routeEvent().
Il est également possible de rediriger des événéments,
c'est-à-dire de les "dévier", en quelque
sorte, de leur "cible" (l'élément où
ils se sont produits). Ceci est permis par la fonction handleEvent(),
qui s'applique à l'objet qui sera la nouvelle cible. Imaginons
que nous ayons plusieurs liens dans un document. Nous voulons que
tout clic au sein du document soit redirigé vers le premier
lien. Ceci est possible grâce au code suivant:
function documentHandler(e) {
document.link[0].handlerEvent(e);
}
function clickHandler(e) {
// code de la fonction
}
document.captureEvents(Event.CLICK);
document.onclick = documentHandler;
document.link[0].onclick = clickHandler;
Assigner des événements
au sein d'une balise
Ceci s'effectue, comme sous IE, par l'intermédiaire d'un
"objet-évenement" transmis en argument à
une fonction (ce qui constitue une différence
importante avec IE). Pour être plus précis,
la spécification de l'argument n'est nécessaire que
si la fonction appelle des méthodes ou des propriétés
de l'objet-événement. Ainsi, on écrira:
<INPUT TYPE="button" VALUE="Ok"
onclick="clickHandler(event)">
(Notons que "event", comme "e", sont des notations
conventionnelles, mais non restrictives).
Il est par ailleurs possible en assignant l'event handler
en attribut de balise (et contrairement à une assignation
du type:
document.link[0].onclick = clickHandler)
de transmettre non plus l'objet-événement en entier,
mais seulement une de ses propriétés. Par exemple:
<INPUT TYPE="button" VALUE="Click
Here" onclick="clickHandler(event.type)">
Alors le paramètre "e" contiendra le type de
l'élément et non l'objet-événement
entier.
Suite: Produire du code compatible
[Jérôme
Morlon 22
mars 2001 , JDNet]
|
