Les evenements 


Les evenements sont des actions que l'on effectue via JavaScript. Ils sont 
définis dans les balises du document HTML. Un évenement est généralement 
associé à une fonction que l'on exécute. Voici quelques exemples:

1. onload


1. onload: est déclanché lorsue la page se charge.
Exemple:
<html>
<head>
<script type="text/javascript">
function ShowUpPicture()
{
... code to show pictures
}

</script>
</head>

<body onload="ShowUpPicture()">
</body>

</html>

2. onclick


The evenement onclick: aura lieu lorsqu'oun objest est double-clické.
Example:
<html>
<body>

First field: <input type="text" id="field1" value="Regards .. ">
<br />
Second field: <input type="text" id="field2">
<br /><br />

<br />
<button ondblclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>

</body>
</html>

En double-clickant the boutton, le contenu du premier champ est copié sur 
le deuxième.
Premier champ
Deuxième champ:


3. onchange:


Le "onchange" evénement aura lieu lorsqu'on change le contenu du champ.
<html>
<head>
<script type="text/javascript">

function the_length(x)
{
var y = document.getElementById(x).value;
document.getElementById(x).value = y.length;
}
</script>
</head>

<body>

Entrer quelques charactères:
<input type="txt" id="word" onchange="the_length(this.id)">

</body>
</html>
Entrer quelques charactères:

Clicker à l'extérieur de la boîte pour voir la longueur du mot entré.

4. onmouseover:


Le "onmouseover" evénement aura lieu lorsque la sourie pointe 
sur un objet particulier.

Exemple:

<body>
<h3>Changing images</h3>
<a href="noscript.html"
onMouseOver="document.ThePicture.src='images/cat.jpg'"
onMouseOut="document.ThePicture.src='images/corto.gif'"
onClick="return false;">
<img src="images/corto.gif" name="ThePicture" alt="changing pictures" border="0">
</a>
</body>

Changement des images


changing pictures


5. onSubmit


The onSubmit evénement est utilisé pour valider un formulaire 
avant de l'envoyer.

Exemple:

<html>
<head>
<script type="text/javascript">

function verify (x)
{
the_form.word.value 
var y = the_form.word.value ;
if (y % 2 !=0 ){
alert (" Enter an even nuumber .." );
}
}
</script>
</head>
<body>


<i>Enter an even number:</i> <br />
<form name="the_form" action="examples.html" onSubmit="verify(this.name)">
<input type="txt" name="word" size="20">
<input type="submit" value="Submit">
</form>
</body>
</html>

Si les valeurs du champ de la fonction verif() return vraie, le 
formulaire est envoyé; sinon la fonction retourne faux et le formulaire 
est annulé.

6. onfocus


Le "onfocus" evénement aura lieu lorsqu'un objet est concerné.
Dans l'exemple suivant, la couleur du charactère entré devient 
rouge.


<html>
<head>
<script type="text/javascript">
function red(x)
{
document.getElementById(x).style.color="red";
}
</script>
</head>

<body>
<b>Enter a character. On focus, its color becomes red.</b>
<br>
<input type="text" onfocus="red(this.id)" id="word">
</body>
</html>

7. autre exemples: setInterval


<script type="text/javascript">
var nbSeconds=0;
var timeID;

function add() {
nbSeconds++;
document.this_form.times.value=nbSeconds;
}

function send() {
document.this_form.nbSeconds.value=nbSeconds;
document.this_form.submit();
}
</script>

<em>On incrémente par "mouseover". Le click recharge la page.</em>

<a href="javascript:send()"
onMouseOver="timeID=setInterval('add()', 1000)"
onMouseOut="clearInterval(timeID)">
<img src="images/check.jpg" name="check" alt="check" border="0">
</a>

<form name="this_form" method="post" action="Post1.php">
<input type="text" name="times" value="0">
<input type="hidden" name="nbSeconds" value="0">
</form>




On incrémente par "mouseover". Le click recharge la page..


check