Gestion dynamique des événements en JavaScript

Ce document présente un exemple de gestion des événements à l'aide de JavaScript et d'un style CSS.

Certaines zones de ce texte sont des zones actives. Il y a 5 zones actives dans ce texte.

On reconnaît une zone active à son changement de couleur lorsque elle est survolée par la souris.

Un clic de souris sur une zone active provoque une duplication du texte de la zone.

Consulter le code source de cette page pour comprendre comment elle fonctionne . . .

Commentaires :

Dans cette page HTML, les différents langages sont séparés :

CSS

La partie active de la page est une <div class="exemple"> définie dans les lignes 50 à 69.
L'attribut class de cette <div> permet d'utiliser les styles définis en CSS lignes 9 à 14.

Les commentaires de la page sont dans la <div class="commentaires"> suivante, lignes 70 à la fin.
L'attribut class de cette <div> fixe le style défini en CSS lignes 15 à 18.

HTML

On remarquera ligne 53 : 

<input type="button" value="Revenir à la Page Originale" onclick="history.go(0)" />

Ce bouton exécute lors d'un clic l'instruction JavaScript history.go(0)
Ceci a pour effet de recharger la page actuelle et donc de la rétablir dans son état initial.

On trouvera aussi entre les lignes 54 et 65 plusieurs balises <span> encadrant des zones actives, ainsi : 

<span class="active" onmouseover="survoler(this)" onmouseout="sortir(this)" onclick="dupliquer(this)">zone active</span>

Ces zones réagissent à différents événements produits par l'utilisateur de la souris en demandant l'exécution de fonctions JavaScript :

JavaScript

Les fonctions JavaScript lancées par les zones actives sont définies et commentées lignes 23 à 47.
Le mot-clé this fait référence à l'élément de la structure DOM qui effectue l'appel JavaScript.
Chacune des fonctions agit en modifiant les propriétés de cet élément.