les événements de Javascript

.....

les événements de Javascript

JavaScript cours tutorial

Les événements (clic ou survol de souris, focus, chargement, etc.) sont des actions qui peuvent être détectées par JavaScript.

Événements de Javascript

Dans Javascript, tout un ensemble de commandes permet de capter ces événements et d'en faire usage dans des scripts pour rendre la page web interactive, pour manipuler des objets ou adaptée aux besoins ou aux spécificités d'une application.

Exemples des événements :

  • Un clic de souris
  • Le chargement d’une page Web ou d'image
  • Survol de souris au-dessus d'un point chaud sur la page Web
  • Sélection d'un champ d'entrée dans un formulaire HTML
  • Soumission d’un formulaire HTML

Note :
Des événements sont normalement employés en combinaison avec des fonctions, et la fonction ne sera pas exécutée avant que l'événement ne se produise !
Pour une référence complète des événements identifiés par JavaScript, allez à notre référence complète de Javascript.

Les événements onLoad et onUnload

Les événements onLoad et onUnload sont déclenchés quand l'utilisateur appelle ou ferme une page Web.
L'événement onLoad est souvent employé pour vérifier le type la version du navigateur du visiteur, et charge la version appropriée de la page Web basée sur l'information recueillée.
Les événements onLoad et onUnload sont également souvent employés pour traiter les cookies qui devraient être placés quand une page est chargée. Par exemple, vous pourriez avoir un popup demandant le nom d'utilisateur sur sa première arrivée à votre page. Le nom est alors stocké dans un cookie. La prochaine fois que le visiteur arrive sur votre page, vous pourrait avoir un autre popup lui souhaitant bienvenue !.

Syntaxe :

onload="Instruction"
onunload="Instruction"

onFocus, onBlur et onChange

Les événements onFocus, onBlur et onChange sont souvent employés en combinaison avec la validation des champs d’un formulaire.

Syntaxe :

onfocus="Instruction"
onBlur="Instruction"
onchange="Instruction"

Ci-dessous un exemple de la façon d’employer l'événement onChange. La fonction checkEmail() s'appellera toutes les fois que l'utilisateur change le contenu du champ pour saisir son email:

<input type="text" size="30" id="email" onchange="checkEmail()">

OnSubmit

L'événement onSubmit est employé pour valider tous les champs d’un formulaire avant de le soumettre.
Syntaxe :

onsubmit="Instruction"

Ci-dessous un exemple de l'événement onSubmit. La fonction checkForm() s'appellera quand l'utilisateur clique sur le bouton de soumission sous le formulaire. La fonction checkForm() renvoie vrai ou faux. S'il renvoie vrai le formulaire sera soumis, si non la soumission sera décommandée :

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

OnMouseOver et onMouseOut

onMouseOver et onMouseOut sont employés souvent pour créer des boutons animés.
Syntaxe :

onmouseover="Instruction" 

onmouseout="Instruction"

Ci-dessous un exemple d'un événement onMouseOver. Une boîte alerte apparaît quand un événement onMouseOver est détecté :

<a href="http://www.oujood.com" onmouseover="alert('C’est un événement onMouseOver ');return false"> http://www.oujood.com </a>

Nous allons voir dans un prochain chapitre les fonctions

Pour une référence complète des événements identifiés par JavaScript, allez à notre référence complète de Javascript.

Par carabde 30 mars 2014