Les événements

Chaque élément de formulaire (Bouton, zone de texte, case à cocher, ...) est susceptible de déclencher du code JavaScript lorsqu'il se passe quelque chose avec cet élément (quand on clique dessus, on le met à jour, on double-clique, ...)

Cliquez ici pour voir la liste des événements possibles

Exemple simple : Sur le clic d'un bouton

Voici un simple bouton qui quand on clique dessus, affiche Merci :

On a encadré Merci par des apostrophes ' et pas par des guillemets " simplement parce que le paramère de ONCLICK doit lui-même être entre guillemets.

Appel d'une procédure JavaScript lors du clic sur un bouton

Cet exemple fait strictement la même chose qu'avant, mais avec l'appel à une fonction cette fois :

<SCRIPT LANGUAGE="JavaScript">
  function Traitement()
    {
    alert ("Merci")
    }
</SCRIPT>

Si j'avais voulu que ce soit lors d'un double clic que la fonction Traitement soit appelée, j'aurais écrit :

Attention à certaines incomptabilités : Il n'est pas possible de faire cohabiter sur un même bouton un ONCLICK et un ONDBLCLICK : C'est le ONCLICK qui serait systématiquement appelé, même en cas de double-clic :

Focus : On le prend, on le perd

Perte de focus (ONBLUR)

On peut effectuer du JavaScript quand on perd le focus. On pourrait imaginer par exemple de corriger des données saisies invalides dans un champ lors de la perte de son focus. L'exmple idiot qui suit refuse que votre nom soit Martin (Respectez la casse). Si c'est ce que vous faites malgré tout, il affiche "Non non non" et vous impose d'écrire Drucker à la place :

<SCRIPT LANGUAGE="JavaScript">
  function PerdFocus()
    {
    if (EDINom.value == "Martin")
      {
      alert("Non non non !")
      EDINom.value = "Drucker"
      }
    }
</SCRIPT>

<HTML>
  <HEAD></HEAD>
  <BODY>
    Nom : <INPUT TYPE="TEXT" NAME="EDINom" ONBLUR="JavaScript:PerdFocus()"> <BR>
    Prénom : <INPUT TYPE="TEXT">
  </BODY>
</HTML>

Prise de focus (ONFOCUS)

Cet exemple remplit la zone de nom quand on clqiue dessus et qu'elle est encore vide par "Votre nom", histoire que l'utilisateur ne se trompe pas

<SCRIPT LANGUAGE="JavaScript">
  function PrendFocus()
    {
    if (EDINom.value == "")
      {
      EDINom.value = "Votre nom"
      }
    }
</SCRIPT>

<HTML>
  <HEAD></HEAD>
  <BODY>
    Nom : <INPUT TYPE="TEXT" NAME="EDINom" ONFOCUS="JavaScript:PrendFocus()"> <BR>
    Prénom : <INPUT TYPE="TEXT">
  </BODY>
</HTML>

Déplacement de souris

Sur un élément de formulaire

L'exemple suivant fait la même chose que l'exemple précédent, sauf que cette fois, il n'y a même plus besoin de cliquer dans la zone : Le simple fait de passer la souris par dessus suffit à remplir le champ :

<SCRIPT LANGUAGE="JavaScript">
  function SourisPasse()
    {
    if (EDINom.value == "")
      {
      EDINom.value = "Votre nom"
      }
    }
</SCRIPT>

<HTML>
  <HEAD></HEAD>
  <BODY>
    Nom : <INPUT TYPE="TEXT" NAME="EDINom" ONMOUSEOVER="JavaScript:SourisPasse()"> <BR>
    Prénom : <INPUT TYPE="TEXT">
  </BODY>
</HTML>

Sur un simple texte en gras

Il n'est pas indispensable d'avoir un élément de formulaire pour déclencher une fonction JavaScript quand on passe par dessus : L'exemple suivant affiche dans une page HTML : "C'est quoi le web ?", et quand on passe sur le mot web qui est en gras, on déclenche la fonction ExpliqueWeb, car la balise STRONG permet le paramètre ONMOUSEMOVE, comme la plupart des balises de mise en forme d'ailleurs.

<SCRIPT LANGUAGE="JavaScript">
  function ExpliqueWeb()
    {
    alert("C'est l'ensemble des pages HTML")
    }
</SCRIPT>
<HTML>
  <HEAD></HEAD>
  <BODY>
    C'est quoi le <STRONG ONMOUSEMOVE="JavaScript:ExpliqueWeb()">web</STRONG> ???
  </BODY>
</HTML>

Evénements de page : Chargement et déchargement (ONLOAD, ONUNLOAD)

Cet exemple affiche simplement "Je charge la page" dès qu'on ouvre la page HTML en question, et "Je quitte la page" dès qu'on quitte la page (ou qu'on la ferme)

<SCRIPT LANGUAGE="JavaScript">
  function LeChargement()
    {
    alert("Je charge la page")
    }

  function LeDechargement()
    {
    alert("Je quitte la page")
    }
</SCRIPT>

<HTML>
  <HEAD></HEAD>
  <BODY ONLOAD="JavaScript:LeChargement()" ONUNLOAD="JavaScript:LeDechargement()">
    Je suis dans la page
  </BODY>
</HTML>

dsd

JavaScript : Les événements