Les événements

Introduction
Les événements

Abort
Blur
Change
Click
Dbclick
Dragdrop
Error
Focus
Keydown
Keypress
Keyup
Load
MouseOver
Mouseout
Reset
Resize
Select
Submit
Unload

1. Introduction

Il est évident qu’avant de voir comment gérer les événements en JavaScript, on doit savoir ce que cela signifie.
Pour commencer, voici un exemple : quand vous cliquez sur un lien hypertexte, vous êtes automatiquement dirigé quelque part, dans un endroit spécifié par le lien. Eh bien le clic qui a permis cette redirection est un événement.

Pour vous dire, un événement est celui qui permet d’intercepter les changements d’états en déclenchant une fonction précise qui permet la production d’une action précise. Les événements JavaScript ne sont pas sorciers, mais ils permettent une réelle interactivité des pages web.

2. Les événements

Ici, on vous liste la majorité des événements que vous pouvez rencontrer en JavaScript.

Abor (onAbort)

L'événement abort se déclenche lorsque le chargement d'une ressource (image surtout) a été abandonnée.

Syntaxe :
onabort="CodeJavaScript"

Exemple:
<html> <head> <script> function abortImage() { alert('Desole le chargement de l\'image a été abandonné') } </script> </head> <body> <img src="logo.gif" onabort="abortImage()"> </body> </html>

Comme nous voyons très bien, ici notre code consiste à envoyer un message d’alerte en cas de l’abandon du chargement de l’image logo.gif.

Blur (onBlur)

Blur est executé lorsqu’un utilisateur quitte un champ de saisie.

Syntaxe :
<element onblur="CodeJavaScript">
ou
object.onblur=function(){CodeJavaScript};

Exemple:
<INPUT onblur=alert(event.srcElement.name) value="Votre pseudonyme" name="Vous venez de quitter la zone de saisie">

Change (onChange)

Change (onchange) est executé lorsque l'utilisateur modifie le contenu d'un champ de données.

Syntaxe :
<element onchange="CodeJavaScript">
ou
object.onchange=function(){CodeJavaScript};

Click (onClick)

Click (onClick) est executé lorsque l'utilisateur clique sur l'élément associé à l'événement.

Syntaxe :
<element onclick="CodeJavaScript">
ou
object.onclick=function(){CodeJavaScript};

Dbclick (onDbclick)

Dblick (ondblick) est executé lorsque l'utilisateur clique deux fois sur l'élément associé à l'événement.

Syntaxe :
<element ondbclick="CodeJavaScript">
ou
object.ondbclick=function(){CodeJavaScript};

Dragdrop (onDragdrop)

DragDrop exécute le code JavaScript ou d'une fonction lors d'un événement. C'est le cas par exemple lorsque l'utilisateur dépose un objet sur la fenêtre du navigateur, comme déplacer un fichier.

Syntaxe :
<element ondragdrop="CodeJavaScript">
ou
object.ondragdrop=function(){CodeJavaScript};

Error (onerror)

L'événement onerror est déclenchée si une erreur se produit lors du chargement d'un fichier externe.

Syntaxe :
<element onerror="CodeJavaScript">
ou
object.onerror="SomeJavaScriptCode"

Exemple: un code qui affiche une erreur si l’image maphoto.png n’est pas chargée.
<html> <head> <script> function imgError() { alert('l\'image n\'est pas chargée'); } </script> </head> <body> <img src="maphoto.png" onerror="imgError()"> </body> </html>

Focus (onfocus)

L'événement onfocus se produit quand un élément reçoit le focus. Il est beaucoup utilisé dans les formulaires.

Syntaxe :
<element onfocus="CodeJavaScript">
ou
object.onfocus=function(){CodeJavaScript};

Keydown (onkeydown)

L'événement onkeydown se produit quand l'utilisateur appuie sur une touche du clavier.

Syntaxe :
<element onkeydown="CodeJavaScript">
ou
object.onkeydown=function(){CodeJavaScript};

Keypress (onkeypress)

L'événement onkeypress se produit lorsque l'utilisateur maintient une touche de son clavier enfoncée.

Syntaxe :
<element onkeypress="CodeJavaScript">
ou
object.onkeypress=function(){CodeJavaScript};

Keyup (onkeyup)

L'événement onkeyup se produit lorsque l'utilisateur relâche une touche de son clavier qui était enfoncée.

Syntaxe :
<element onkeyup="CodeJavaScript">
ou
object.onkeyup=function(){CodeJavaScript};

Load (onload)

L'événement onload exécute un code JavaScript lorsque le chargement de la page est terminé.

Syntaxe :
<element onload="CodeJavaScript">
ou
window.onload=function(){CodeJavaScript};

MouseOver (onmouseover )

L'événement onmouseover se produit lorsque le pointeur est déplacé sur un élément.

Syntaxe :
<element onmouseover="CodeJavaScript">
ou
object.onmouseover=function(){CodeJavaScript};

MouseOut (onmouseout )

L'événement onmouseout se produit lorsque le curseur de la souris quitte un élément.

Syntaxe :
<element onmouseout="CodeJavaScript">
ou
object.onmouseout=function(){CodeJavaScript};

Reset (onreset)

L'événement onreset se produit lorsque le bouton de réinitialisation d'un formulaire est cliqué.

Syntaxe :
onreset="JavaScriptCode"

Exemple:
<form onreset="alert('Le formulaire sera réinitialisé')"> Votre numero de téléphone: <input type="text" name="telephone"><br> <input type="reset" value="Reset"> </form>

Resise (onresize)

L'événement onresize se produit lorsque l'utilisateur redimensionne la fenêtre du navigateur

Syntaxe :
<element onresize="CodeJavaScript">
ou
window.onresize=function(){CodeJavaScript};

Select (onselect)

L'événement onselect se produit lorsque l'utilisateur sélection du texte dans un champ d'un formulaire

Syntaxe :
<element onselect="CodeJavaScript">
ou
object.onseclect=function(){CodeJavaScript};

Submit (onsubmit)

L'événement onsubmit exécute un code JavaScript lorsqu'on clique sur un bouton de soumission d'un formulaire.

Syntaxe :
onsubmit="JavaScriptCode"

Unload (onunload)

L'événement onunload exécute un code JavaScript lorsque l'utilisateur quitte la page en cours

Syntaxe :
<element onunload="CodeJavaScript">
ou
window.onunload=function(){CodeJavaScript};