Gestion
des événements en DHTML (1/3): IE 4+
Les navigateurs n'ont pas forcément la même gestion des événements, piliers du DHTML. Comment procède Internet Explorer ?
Un "objet-événement" est accessible, sous
IE, de la manière suivante:
window.event
tandis que l'élément associé à l'événement
(l'élément dans lequel a eu lieu l'événement)
est donné par:
window.event.srcElement
et le type de l'événement par:
window.event.type
Il existe de nombreuses autres propriétés
d'un événement, comme la position du curseur de
la souris au moment de l'interception de l'événement,
le bouton de la souris qui a été pressé et
a déclenché l'événement, etc.
Le point important, sous IE, est le suivant: lorsqu'un événement
se produit, et qu'aucun event handler ne lui est associé
au sein de l'élément (balise) où il a lieu,
alors l'élément père (dans une arborescence
de noeuds, on parle de pères et de fils), donc l'élement
qui englobe notre élément initial, tente d'intercepter
l'événement si un event handler lui est associé.
Si ce n'est pas le cas, l'arborescence est "remontée"
de nouveau, et ce jusqu'à la balise <BODY>. Un tel
fonctionnement est appelé, en anglais, event bubbling.
Pour illustrer ceci, considérons le code suivant:
<html>
<head>
<script language="JavaScript">
<!--
function getElement() {
var elem = window.event.srcElement;
window.alert('Element ' + elem);
}
function getBalise() {
var balise = window.event.srcElement.tagName;
window.alert('Balise ' + balise);
}
function couleur() {
var elem = window.event.srcElement;
elem.style.color = "red";
window.event.cancelBubble = true;
}
// -->
</script>
</head>
<body onClick="getElement()">
<h1>Exemple</h1>
<div onClick="getBalise()"> Cet exemple <b>en
DHTML</b> illustre le concept
d'<i>event bubbling</i> propre à <u onClick="couleur()">Internet
Explorer</u>
</div>
</body>
</html>
Il produit la page suivante.
Dans celle-ci, cliquer sur le titre "Exemple" va déclencher
l'événement onClick de <BODY> par event bubbling,
puisqu'aucun event handler n'est associé à
<H1>. A l'inverse, cliquer sur "Internet Explorer"
devrait déclencher à la fois un changement de couleur
et l'apparition de la fenêtre pop-up. Mais la propriété
window.event.cancelBubble = true permet
de supprimer l'event bubbling pour la fonction couleur().
Un autre aspect de la gestion des événements sous
IE est la propriété
window.event.returnValue
qui prend les valeurs "true" et "false". La
valeur "false" permet de désactiver le comportement
par défaut associé à l'événement.
Attribuer cette valeur à la propriété ci-dessus
au sein d'une fonction permet ainsi, par exemple, de programmer
un message de confirmation lors du clic sur un lien, et, en cas
d'annulation, de désactiver le changement d'URL. A noter
que la désactivation du comportement ne désactive
pas pour autant l'event bubbling.
Suite: Netscape 4.x
[Jérôme
Morlon 22
mars 2001 , JDNet]
|
