Accueil    HTML    Liste des évènements html
 



  Liste des évènements HTML

Index des balises html


Présentation des évènements html



Les évènements correspondent aux actions effectuées par l'utilisateur (la plus courante étant le clic de souris) qui permettent d'interagir avec le contenu parcouru. Chaque action est associée à un évènement : on associe ainsi au clic de la souris l'évènement "onclick", au double clic l'évènement "ondblclick".

Ces évènements sont gérés par le gestionnaire d'évènements qui permet de mettre en relation un évènement et les actions qui seront faites lorsque celui-ci sera déclenché. Ces actions sont écrites en javascript.

Un exemple simple est d'afficher un message d'alerte sur le clic d'un bouton :


<input type="button" value="exemple"
      onclick="alert('évènement onclick déclenché');" />



Les évènements sont associés aux balises html (dans notre exemple, l'évènement "onclick" est associé au bouton, c'est à dire à la balise input). Il est ainsi possible de déclencher des évènements sur la grande majorité des balises html.

Il faut cependant bien garder en tête une certaine logique, car il n'est pas possible d'associer n'importe quel évènement à n'importe quelle balise. Ainsi les évènements "onsubmit" et "onreset" permettant de soumettre ou de réinitialiser les champs d'un formulaire sont associés exclusivement à la balise <form>.

Un nouvel exemple montre l'utilisation des évènements "onmouseover" et "onmouseout" sur la balise html <div>. L'évènement "onmouseover" se déclenche lorsque le curseur de la souris survole la balise (plus précisément au moment où le curseur rentre dans sa zone) et l'évènement "onmouseout" est activé au moment où le curseur quitte la zone de la balise <div>.


<div style="width:100px; height:100px; border:solid 1px black;"
    onmouseover="this.innerHTML='Dedans';"
    onmouseout="this.innerHTML='Dehors';">
</div>



Liste des évènements




onabort Se déclenche lorsqu'une image n'arrive pas à être complètement chargée ou si son chargement est interrompu par l'utilisateur
Evènement s'appliquant uniquement à la balise <img>
onblur Se déclenche lorsque l'élément perd le focus
onchange Se produit lorsqu'une modification a lieu sur un champ de saisie
onclick Se déclenche lorsqu'un clic est fait sur l'élément
ondblclick Se déclenche lorsqu'un double clic est fait sur l'élément
ondragdrop Se déclenche lorsque l'utilisateur essaie de glisser déplacer un élément dans la fenêtre.
Cet évènement s'applique à l'objet "window" : window.ondragdrop
onerror Se déclenche lorsqu'une erreur est rencontrée au chargement de la page.
Cet évènement s'applique à l'objet "window" : window.onerror
onfocus Se déclenche lorsque l'élément à le focus
onkeydown
onkeypress
onkeyup
Ces trois évènements constituent ensemble la saisie d'une touche du clavier :
"onkeydown" correspond à l'action d'appuyer sur une touche
"onkeypress" correspond à l'action de maintenir enfoncer la touche
"onkeyup" correspond à l'action de relâcher la touche
onload Cet évènement se déclenche lorsque le document a terminé son chargement complet
onmouseover
onmouseout
Ces évènement se déclenchent losrque le curseur de la souris survole l'élément (onmouseover) ou bien quitte l'élément (onmouseout)
onmousemove Se déclenche losrque le curseur de la souris se déplace sur le document html
onmousedown
onmouseup
Ces évènement se déclenchent losrqu'un bouton de la souris est appuyé (onmousedown) ou bien relaché (onmouseup)
onreset Permet de réinitialiser les champs d'un formulaire
onresize Se déclenche lorsque l'utilisateur redimensionne la fenêtre du navigateur.
Cet évènement s'applique à l'objet "window" : window.onresize
onselect Se déclenche lorsque l'utilisateur sélectionne du texte sur la page (si l'évènement est associé au <body> ou dans une zone de texte
onsubmit Permet de soumettre le formulaire
onunload Se déclenche lorsque le navigateur va quitter la page courante