Gestion
des événements en DHTML (3/3): développer indépendamment du navigateur
Les navigateurs n'ont pas forcément la même gestion des événements, piliers du DHTML. Comment, enfin, produire du code compatible avec ces deux navigateurs ?
Cet article
traite des moyens de produire un code DHTML qui puissent produire
le même résultat à la fois sous IE 4+ et Netscape
4.x.
Sous IE 4+, nous avons vu (première
partie), que les événéments étaient
interceptés par l'élément où ils avaient
lieu, et étaient ensuite transmis en remontant l'arborescence
(event bubbling). Sous Netscape 4.x (deuxième
partie), au contraire, les événements peuvent
être capturés dès le sommet de la
hiérarchie, mais dans ce cas il est nécessaire d'effectuer
manuellement la transmission (ou la redirection) à
un niveau inférieur. En quelque sorte, les éléments
"voyagent" dans des sens opposés suivant le navigateur.
Deux points sont à prendre en considération pour produire
du code qui tienne compte de cette différence fondamentale.
Le premier tient à la capture des événements
en amont (du moins du point de vue de Netscape). Automatique
par event bubbling sous IE, elle est manuelle sous Navigator.
On écrira alors quelque chose comme:
SCRIPT
LANGUAGE="JavaScript">
<!--
function documentHandler(e) {
// code de la fonction
}
if (window.Event) { // propre à Navigator
document.captureEvents(Event.CLICK);
}
document.onclick = documentHandler;
// -->
</SCRIPT>
tirant parti
du fait que window.Event est un objet supporté par
Navigator seulement (IE supporte pour sa part l'objet window.event,
avec un e minuscule): sa valeur (logique) sera VRAI sous Navigator
et FAUX sous IE.
Le second point tient à la manière dont l'objet-événement
est représenté dans la fonction qui définit
le comportement associé à l'événement.
Sous Netscape, cet objet-événement (ou sa propriété)
est transmis(e) manuellement en argument, tandis que sous IE, cette
transmission est implicite. Ainsi, on écrira:
<SCRIPT
LANGUAGE="JavaScript">
<!--
var flag = (window.Event)? true : false;
function documentHandler(e) {
if (flag) {
elem = e.target;
} else {
elem = window.event.srcElement;
}
alert('Element' + elem);
}
if (flag) {
document.captureEvents(Event.CLICK);
}
document.onclick = documentHandler;
// -->
</SCRIPT>
Il existe d'autres
différences de comportement entre Nestcape Navigator 4.x
et IE 4+, notamment dans la numérotation des boutons de la
souris ou les codes renvoyés lors de l'appui sur certaines
touches. De telles particularités seraient également
à prendre en compte dans certains cas précis de programmes
DHTML. Elles dépassent le cadre de cet article consacré
à la gestion des événements en général,
aussi nous ne faisons que mentionner le problème. De même,
IE et Netscape supporte différents comportements pour différentes
balises: là encore, nous ne rentrons pas dans les détails.
Mais gardez à l'esprit qu'un code véritablement indépendant
du navigateur se doit non seulement de respecter les différentes
approches dans la gestion des événements, qui, nous
l'espérons, vous sont maintenant familières, mais
aussi des particularités annexes, moins difficiles à
contourner mais dont les effets peuvent s'avérer problématiques
pour les utilisateurs de votre site qui ne retrouveront pas, par
exemple, la même page sous IE sur leur lieu de travail et
sous Netscape chez eux.
[Jérôme
Morlon 22
mars 2001 , JDNet]
|