Les gestionnaires d’événements en JavaScript

Les événements

Passons en revue différents événements implémentés en JavaScript.

Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément : click
Lorsque la page est chargée par le navigateur : load
Lorsque l'utilisateur quitte la page : unload
Lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout autre élément : mouseover
Lorsque le pointeur de la souris quitte un lien ou tout autre élément : mouseout
Lorsqu'un élément de formulaire a le focus c'est à dire devient la zone d'entrée active : focus
Lorsqu'un élément de formulaire perd le focus c'est à dire que l'utilisateur clique hors du champ et que la zone d'entrée n'est plus active : blur
Lorsque la valeur d'un champ de formulaire est modifiée et que le champ perd le focus : change
Lorsque l'utilisateur sélectionne un champ dans un élément de formulaire : select
Lorsque l'utilisateur clique sur le bouton Submit pour envoyer un formulaire : submit

Les gestionnaires d'événements

Pour être efficace, il faut qu'à ces événements soient associées les actions prévues par vous. C'est le rôle des gestionnaires d'événements. la Syntaxe est

onevenement = "fonction()"

Par exemple, onclick=" alert('Vous avez cliqué sur cet élément');"

De façon littéraire, au clic de l'utilisateur, ouvrir une boîte d'alerte avec le message indiqué.

Evénement classique en informatique, le click de la souris

Le code de ceci est :

</p>
<p>&lt;form&gt;</p>
<p>&lt;input type=&quot;button&quot; value=&quot;Cliquez ici&quot; onclick=&quot;alert(&#39;Vous avez bien cliqu&eacute; ici&#39;);&quot; /&gt;</p>
<p>&lt;/form&gt;</p>
<p>

onload et onunload

L'événement load survient lorsque la page a fini de se charger. A l'inverse, unload survient lorsque l'utilisateur quitte la page.

Les événements onload et onunload sont utilisés sous forme d'attributs de la balise <body> ou <frameset>. On peut ainsi écrire un script pour souhaiter la bienvenue à l'ouverture d'une page et un petit mot d'au revoir au moment de quitter celle-ci.

</p>
<p>&lt;html&gt;</p>
<p>&lt;head&gt;</p>
<p>&lt;script type=&quot;text&quot;/javascript&quot;&gt;</p>
<p>function bienvenue()</p>
<p>{</p>
<p>alert(&quot;Bienvenue &agrave; cette page&quot;);</p>
<p>}</p>
<p>function au_revoir()</p>
<p>{</p>
<p>alert(&quot;Au revoir&quot;):</p>
<p>}</p>
<p>&lt;/script&gt;</p>
<p>&lt;/head&gt;</p>
<p>&lt;body onload=&quot;bienvenue();&quot; onunload=&quot;au_revoir();&quot;&gt;</p>
<p>&lt;/body&gt;</p>
<p>&lt;/html&gt; </p>
<p>

onmouseover & onmouseout

L'événement onmouseover se produit lorsque le pointeur de la souris passe au-dessus (sans cliquer) d'un lien ou d'une image. Cet événement est fort pratique pour, par exemple, afficher des explications soit dans la barre de statut soit avec une petite fenêtre genre infobulle.

L'événement onmouseout, généralement associé à un onmouseover, se produit lorsque le pointeur quitte la zone sensible (lien ou image).

onfocus

L'événement onfocus survient lorsqu'un champ de saisie a le focus c'est à dire quand son emplacement est prêt à recevoir ce que l'utilisateur à l'intention de taper au clavier. C'est souvent la conséquence d'un clic de souris ou de l'usage de la touche "Tab".

onblur

L'événement onblur a lieu lorsqu'un champ de formulaire perd le focus. Cela se produit quand l'utilisateur ayant terminé la saisie qu'il effectuait dans une case, clique en dehors du champ ou utilise la touche "Tab" pour passer à un autre champ. Cet événement sera souvent utilisé pour vérifier la saisie d'un formulaire.

Le code est :

</p>
<p>&lt;form&gt;</p>
<p>&lt;input type=&quot;text&quot; onblur=&quot;alert(&#39;Ceci est un Blur&#39;);&quot;/&gt;</p>
<p>&lt;/form&gt;</p>
<p>

onchange

Cet événement s'apparente à l'événement onblur mais avec une petite différence. Non seulement la case du formulaire doit avoir perdu le focus mais aussi son contenu doit avoir été modifié par l'utilisateur.

onselect

Cet événement se produit lorsque l'utilisateur a sélectionné (mis en surbrillance ou en vidéo inverse) tout ou partie d'une zone de texte dans une zone de type text ou textarea.

Les gestionnaires d'événement disponibles en JavaScript

Il est utile dans cette partie de présenter la liste des objets auxquels correspondent des gestionnaires d'événement bien déterminés.

Gestionnaires d'événement
Objets	Gestionnaires d'événement disponible
Fenêtre	onload, onunload
Lien hypertexte	onclick, onmouseover, onmouseout
Elément de texte	onblur, onchange, onfocus, onselect
Elément de zone de texte	onblur, onchange, onfocus, onselect
Elément bouton	onclick
Case à cocher	onclick
Bouton radio	onclick
Liste de sélection	onblur, onchange, onfocus
Bouton Submit	onclick
Bouton Reset	onclick

{lang: 'fr'}

Je vous recommande aussi la lecture des sujets suivants :

Le write() en JavaScript La méthode write() La syntaxe est assez simple soit write("votreTexte");...
Les variables en JavaScript Les variables contiennent des données qui peuvent être modifiées lors...
Les opérateurs en JavaScript Voyons les différents opérateurs mis à notre disposition par JavaScript...
Les données sous JavaScript JavaScript utilise 4 types de données : Type Description Type...
La priorité des opérateurs JavaScript Les opérateurs s'effectuent dans l'ordre suivant de priorité (du degré...

Mots-clefs :JavaScript

RyleBlog