Exemples de gestion des événements avec le DOM

I. ... avec un attribut

I.1 L'effet

Un élément avec une simple gestion d'événement.

I.2 Le code

<span style="background-color: yellow" onmouseover="this.style.backgroundColor='black', this.style.color='white'" onmouseout="this.style.backgroundColor='yellow', this.style.color=''"> Un élément avec une simple gestion d'événement</span>

I.3 Commentaires

Dans cet exemple, deux événements différents sont capturés, onmouseover et onmouseout. La valeur affectée à chacun de ces attributs est une chaîne de caractères contenant du code JavaScript. Le mot-clef this fait référence à l'objet qui a déclenché l'événement.

II. Appel à une fonction dynamique

II.1 L'effet

Exemple de contenu avec un événement onclick.

II.2 Le code

<span style="background-color:yellow;" onclick="alert(this.onclick)">Exemple de contenu avec un événement onclick.</span>

II.3 Commentaires

Une boîte d'alerte devrait afficher une définition de fonction, correspondant, nom inclus, à celle qui est créée dynamiquement par le navigateur.

III. Appel à une propriété

III.1 L'effet

Exemple avec un événement souris.

III.2 Le code HTML

<span id="sample1" style="background-color:yellow;">Exemple avec un événement souris.</span>

III.3 Le code JavaScript

document.getElementById('sample1').onmouseover = highlight;
document.getElementById('sample1').onmouseout  = normal;

function highlight(event) {

  this.style.backgroundColor='black';
  this.style.color='white';
}

function normal(event) {

  this.style.backgroundColor='yellow';
  this.style.color='';
}

III.4 Commentaires

Il est à remarquer qu'on affecte à la propriété onmouseover la valeur highlight, autrement dit, le nom de la fonction sans les parenthèses.Cela représente l'objet de type function attendu par la propriété: une référence à la fonction qui doit être appelée, et non un appel à la fonction.

Si highlight() avait été utilisé en lieu et place, le navigateur aurait appelé la fonction et renvoyé la valeur qu'elle retourne à la propriété.

IV. Exemple de contrôle du flot

IV.1 L'effet

IV.2 Le code

Il est cette fois-ci un peu plus complexe, mais n'est là que pour illustrer les phase de descente et de remontée des événements. Il est accessible en regardant le code source de cette page.

IV.3 Commentaires

En cliquant sur le DIV le plus interne, six gestionnaires d'événement sont lancés : trois descendant l'arbre du document, et trois le remontant. Dans cet exemple, la même fonction est appelée, mais on aurait pu spécifier une fonction particulière pour chacun de ces gestionnaires.

Dans la trace, l'élément Target est celui d'où vient l'événement, tandis que l'élément Current est celui auquel est attaché l'event listener. Ces deux valeurs sont tirées de propriétés de l'objet Event passé au gestionnaire.