Accueil    HTML    Evenement onclick
 



Evenement onclick  Evenement onclick : clic sur une balise html

«  Partie précédente  |  Index  |  Partie suivante  »


L'évènement onclick est associé au clic du bouton gauche de la souris. Il exécute le code javascript contenu dans l'attribut "onclick" de l'élément HTML sur lequel il a été appliqué. L'évènement onclick déclenche une ou plusieurs actions : celles-ci peuvent être soit du code soit l'appel à une ou plusieurs fonctions écrites dans des blocs de script.

Son utilisation la plus fréquente se fait sur les boutons mais il est également possible d'associer l'évènement onclick à la plupart des balises parmi lesquelles <table>, <tr>, <td>, <img>, <span>, <label>, <div> ...

Un clic peut agir simultanément sur plusieurs contrôles, par exemple dans le cas d'une cellule et d'une ligne d'une table. Dans ce cas l'ordre d'exécution se fait de l'élément inclu (la cellule) vers l'élément conteneur (la ligne).

Enfin, l'évènement onclick n'est pas forcément le premier à agir sur un élément. Par exemple un élément lancera le script associé à l'évènement onfocus avant celui associé à l'évènement onclick. De même, l'évènement ondblclick s'effectuera à la suite de l'évènement onclick.



Exemple d'utilisation pour l'évènement onclick :





Clic simple sur un bouton ou une image déclenchant un message javascript :

<input type="button" value="Clic !" onclick="alert('Clic sur le bouton');" />
<img src="../images/ico_home_blue.png" alt="exemple onclick"
   style="cursor:pointer;" onclick="alert('Clic sur l'image');" />


Exemple de clic sur les différents éléments d'un tableau par priorité : balises tr et td

<table cellspacing="0" rules="all" style="border:solid 1px black; cursor:pointer;">
   <tr onclick="alert('clic sur l\'élément tr');">
      <td colspan='3'>Clic sur la ligne</td>
   </tr>
   <tr>
      <td style="width:110px;" onclick="alert('clic sur l\'élément td');">
        Clic sur la cellule
      </td>
      <td style="width:110px;" onclick="alert('clic sur l\'élément td');">
        Clic sur la cellule
      </td>
      <td style="width:110px;" onclick="alert('clic sur l\'élément td');">
        Clic sur la cellule
      </td>
   </tr>
   <tr onclick="alert('clic sur l\'élément tr');">
      <td colspan="3" onclick="alert('clic sur l\'élément td');">
        Clic sur la cellule puis la ligne
      </td>
   </tr>
</table>



Clic simple sur un bouton ou une image déclenchant un message javascript :

      exemple onclick

Exemple de clic sur les différents éléments d'un tableau par priorité : balises tr et td


Clic sur la ligne
Clic sur
la cellule
Clic sur
la cellule
Clic sur
la cellule

Clic sur la cellule puis la ligne