JavaScript Evenement

Les événements permettent de déclencher une fonction selon qu'une action s'est produite ou non.
Exemples :

Faire apparaître une fenêtre alert() lorsque l'utilisateur survole une zone d'une page Web.
Changer l’image au survol de celle-ci
Tester un champ de formulaire quand on quitte celui-ci
Changer la couleur de fond d’un champ de saisi quand il prend le focus
Interdire la validation du formulaire si les champs de saisis obligatoires ne sont pas remplis

Liste des événements principaux, ainsi que les actions à effectuer pour qu'ils se déclenchent :

Nom de l'événement	Action pour le déclencher
onClick	Cliquer (appuyer puis relâcher) sur l'élément
onDblClick	Double-cliquer sur l'élément
onMouseOver	Survol de la souris sur l'élément
onMouseOut	Fin de survol de la souris de l'élément
onMouseDown	Appuyer (sans relâcher) sur le bouton gauche de la souris sur l'élément
onMouseUp	Relâcher le bouton gauche de la souris sur l'élément
onKeyDown	Appuyer (sans relâcher) sur une touche de clavier sur l'élément
onKeyUp	Relâcher une touche de clavier sur l'élément
onKeyPress	Frapper (appuyer puis relâcher) une touche de clavier sur l'élément
onFocus	« Cibler » l'élément
onBlur	Annuler le « ciblage » de l'élément
onChange	Changer la valeur d'un élément spécifique aux formulaires (input,checkbox)
onLoad	Au chargement de la page
onSubmit	Soumission du formulaire suite au clic sur le bouton type="submit"

1. Donner le focus à un élément ".focus()"

Donner le focus à un élément

Ci-dessous, le code correspondant de l'exemple

<!DOCTYPE html>
<html>

<body>
	<h3>Donner le focus &agrave; un &eacute;lement</h3>

	<form>

		<input name="nombre1" type="text">

		<input type="button" value="&lt;-- Donner le focus"
				onclick="this.form.elements['nombre1'].focus();"><br>

		<input name="nombre2" type="text">

		<input type="button" value="&lt;-- Donner le focus"
				onclick="this.form.nombre2.focus();"><br>

		<textarea name="texte3" rows="2" cols="15"></textarea>

		<input type="button" value="&lt;-- Donner le focus" 
				onclick="this.form.texte3.focus();"><br>
	
	</form>

</body>

</html>

2. Vider un champ à la prise de focus (onFocus)

Vider un champ à la prise de focus

Ci-dessous, le code correspondant de l'exemple

<!DOCTYPE html>
<html>

<body>
	<h3>Vider un champ à la prise de focus</h3>
	
	<form name="vider">
		<input type="text" name="login" value="Votre login"
				onFocus="if (this.value=='Votre login') {this.value='';}" >
	</form>

</body> 

</html>

3. Changer le libellé d'un bouton (onClick)

Changer le libellé d'un bouton

Ci-dessous, le code correspondant de l'exemple

<!DOCTYPE html>
<html>

<body>

	<h3>Changer le libell&eacute; d'un bouton</h3>

	<form name="touchemoi">

		<input type="button" name="bouton" value="Cliquez sur moi !"
				onClick="this.value='Vous m\'avez cliqué !!!';" >
	
	</form>
	
</body> 

</html>

4. Survol de souris (onMouseOver)

Survol de souris

Ci-dessous, le code correspondant de l'exemple

<!DOCTYPE html>
<html>

<body>
	<h3>Survol de souris</h3>

	<script>
		function survolmoi1() {
			document.forms["form11"].champtexte.value = "Hé hop ! Bravo" ;
		}
		function survolmoi2() {
			document.forms["form11"].champtexte.value = "" ;
		}
	</script>
	
	<form name="form11">

		<table border="1" cellpadding="10">
			<tr>
				<td onMouseOver="survolmoi1();">Passez la souris ici</td>
				<td rowspan="2"><input type="text" name="champtexte"></td>
			</tr>
			<tr>
				<td onMouseOver="survolmoi2();">Passer la souris l&agrave;</td>
			</tr>
		</table>

	</form>

</body> 

</html>

Passez la souris ici
Passer la souris là