Le Javascript permet d'effectuer certaines opérations à des moments bien précis. Dès que le visiteur effectue une opération sur la page, un évènement est susceptible d'être déclenché. Par exemple, lorsqu'il clique sur un lien, un évènement onclick est déclenché ou lorsqu'il bouge le curseur, des évènements onmouseover et onmouseout sont déclenchés. Vous trouverez ci dessous la liste des évènements javascript ainsi que des exemples de gestion de ces évènements.
Vous avez des problèmes avec javascript ? N'hésitez pas à poser vos questions sur le forum !
Liste des évènements |
Evénement | Se produit... | S'applique à : |
onabort | lorsque l'utilisateur a stoppé le chargement de l'image. | Objet javascript : image Balises HTML : img |
onblur | lors de la perte du Focus. | Objet javascript : form, window, frame Balises HTML : input, textarea, select, body, frame, frameset |
onchange | quand on change le contenu. | Objet javascript : form Balises HTML : input, textarea,select |
onclick | quand on clique. | Objet javascript : link,document, form Balises HTML : a, body,area |
ondlclick | quand on fait un double clique. | Objet javascript : link, document,area Balises HTML : a, body, area |
ondragdrop | quand on déplace un objet dans une fenêtre. | Objet javascript : window, frame Balises HTML : body, frame, frameset |
onerror | lorsqu'il se produit une erreur de script. | Objet javascript : image, window, frame Balises HTML : img, body, frame, frameset |
onfocus | quand un élément prend le focus. | Objet javascript : window, frame, form Balises HTML : body, frameset, frame, input |
onkeydown | quand une touche du clavier est enfoncée. | Objet javascript : link, image, document, form Balises HTML : a, img, body, textarea |
onkeypress | quand on appuie sur une touche. | Objet javascript : link, image, document, form Balises HTML : a, img, body, textarea |
onkeyup | quand on lâche une touche du clavier. | Objet javascript : link, image, document, form Balises HTML : a, img, body, textarea |
onload | lors du chargement. | Objet javascript : image, window, frame img, body, frameset, frame |
onmousedown | quand le bouton de la sourie est appuyé. | Objet javascript : link, document, form Balises HTML : a, body, form |
onmousemove | quand le curseur bouge. | Objet javascript : link, document, form Balises HTML : a, body, form |
onmouseout | quand le curseur sort de l'objet. | Objet javascript : link, area Balises HTML : a, area |
onmouseover | quand le curseur passe au dessus de l'objet | Objet javascript : link, area Balises HTML : a, area |
onmouseup | quand le bouton de la sourie est relâché. | Objet javascript : link, document, form Balises HTML : a, body, input |
onmove | quand on déplace la fenêtre. | Objet javascript : window, frame Balises HTML : body, frameset, frame |
onreset | quand on réinitialise. | Objet javascript : form Balises HTML : form |
onresize | quand on redimensionne. | Objet javascript : window, frame Balises HTML : body, frameset, frame |
onselect | quand on sélectionne. | Objet javascript : form Balises HTML : input, textarea |
onsubmit | quand on envoie un formulaire. | Objet javascript : form Balises HTML : form |
onunload | quand on ferme la fenêtre. | Objet javascript : window, frame Balises HTML : body, frameset, frame |
N'hésitez pas à poser toutes vos questions sur le forum !
Exemples d'utilisation des évènements |
|
Pour exécuter du code lors d'un clic sur un lien : <a href="lien" onclick="javascript:alert('Améliorez votre PC au meilleur prix - frais de port offerts !')" target="_blank"><img src="image"></a> |
|
Pour afficher un curseur différent, à la place de la
flêche habituelle :
|
|
Pour sélectionner le texte d'une boîte de saisie : <input type="text" name="page" class="blanc" style="width:140" onfocus="javascript:this.select();"> |
|
Pour ouvrir un lien lorsqu'un visiteur passe sur un objet, du texte : // Nb : à titre d'exemple, la fonction est placée dans une fonction : <script language="javascript> function golien(URL) {window.open(URL,'C&C','height=480,width=640)}</script> <a href="#" onmouseover="golien('http://www.conseil-creation.com')">Simple texte</a> |
Vous avez un bon exemple à ajouter ? N'hésitez pas à l'envoyer... |