Nous avons vu comment insérer et exécuter du code Javascript à l'ouverture d'un fichier HTML. Il nous faut maintenant voir comment du code Javascript peut être exécuté sur action de l'utilisateur ou tout autre événement.

A la plupart des balises HTML sont associés des gestionnaires d'événements. Ici, on appelle événement, un clic ou le passage du curseur de la souris sur une zone, la modification du contenu d'un champ de saisie, la fin du chargement de la page, etc. La liste est longue.

Prenons, l'exemple de la balise span. Il s'agit en gros d'une balise qui ne fait rien (pas d'impact visible sur le rendu d'une page). Cette balise gère (comme de nombreuse autres) l'événement onclick (i.e. sur clic). Il est donc possible de préciser ce que l'on souhaite qu'il se passe lorsqu'il y a un clic sur la zone définie par la balise span. L'action à déclencher doit être un script dont on précise la nature (ici, javascript). Ce qui donne par exemple le code suivant:

<span onclick="javascript:alert('qui a cliqué?')">clique ici</span>

que vous pouvez tester avec le fichier HTML suivant

javascript/span_onclick.html

Généralement, la balise a est préférée à la balise span. Ceci est essentiellement dû à une question d'habitude. Nous sommes en effet habitués à ce que ce soit un clic sur un lien qui déclenche une action. En plus, la présentation (couleur, forme du curseur) par défaut d'un lien nous est familière et nous invite au clic. Mais, attention, la transposition du code précédent au cas de la balise a n'est pas immédiate. Si vous ne précisez pas de valeur pour l'attribut href alors la balise a se comportera exactement comme la balise span et si vous précisez une valeur (à priori bidon) alors, une fois l'action déclenchée l'URL indiquée sera appellée (si la valeur est une chaîne vide c'est la page courante qui est ré-affichée). Vous pouvez faire le test:

javascript/a_onclick_true.html

Heureusement, il y a moyen de s'en sortir. En fait, l'action enclenchée par le clic sur le lien "a", c'est à dire le renvoi vers une autre page, sera annulé si le résultat de l'exécution du script appelé sur onclick ne retourne pas la valeur true. Et oui, dans notre exemple, l'appel à la fonction alert() se passant correctement, la fonction retourne true et le processus de redirection vers une autre page se poursuit. Il suffit donc de forcer un retour à false pour arrêter le processus.

<a onclick="javascript:alert('qui a cliqué?'); return false">clique ici</a>

ce que vous pouvez valider avec le code suivant

javascript/a_onclick_false.html

Une autre alternative consiste à faire l'appel au code javascript "directement" dans l'attribut href. Comme cela:

<a href="javascript:alert('qui a cliqué?');">clique ici</a>