 |
Chapitre 3 LES EVENEMENTS |
| Précédent | Suivant | |
Les événements
Interface interactive et événements
* Interface interactive = réagir aux actions de l'utilisateur
* Capter une action ==> code HTML
* Réagir à cette action ==> code JavaScript
* Qu'est-ce qu'un événement ?
* Généralement, action de l'utilisateur dans la page
* Souris, clavier...
* Mais aussi, action du navigateur
* Chargement d'une page, erreur de téléchargement...
* Evénement capté par l'élément HTML qui le subit
* <balise onévénement="code JavaScript">...</balise>
* Différents types d'événements
* Evénements de la souris
* Evénements du clavier
* Evénements de formulaire
* Evénements de page
Identification d'un élément HTML
* Modification d'un élément HTML ==> identification
* <balise id="identifiant" ...>...</balise>
* <balise name="identifiant" ...>...</balise>
* Accès à l'élément à partir de son identifiant
* document.getElementById("identifiant")
* document.getElementByName("identifiant")
* Utilisation de l'attribut "id" préconisée
* Attribut "name" maintenant obsolète
* Encore utile pour les formulaires
* Dans ce cas, mettre les deux: "id" et "name"
* "name" sert pour la soumission du formulaire
* Autre possibilité d'accès aux éléments HTML
* Images: document.images["identifiant"]
* Formulaires: document.forms["identifiant"]
Evénements de la souris
* Evénements que l'utilisateur déclenche avec la souris
* Susceptibles d'être subis par n'importe quel élément visible
* Evénements liés à l'action du bouton
* mousedown
* Déclenché lorsque le bouton de la souris est enfoncé sur un élément
* mouseup
* Déclenché lorsque le bouton de la souris est relâché sur un élément
* click
* Déclenché lors d'un clic de la souris (enfoncé puis relâché) sur un élément
* dblclick
* Déclenché lors d'un double-clic de la souris sur un élément
* Evénements liés au déplacement
* mouseover
* Déclenché lorsque la souris arrive sur un élément
* mouseout
* Déclenché lorsque la souris sort d'un élément
* mousemove
* Déclenché lorsque la souris bouge sur un élément
Exemple de gestion de la souris
<html>
<head>
<script type="text/javascript">
function danser() {
document.images["pingouin"].src = "danse.gif";
}
function attendre() {
document.images["pingouin"].src = "immobile.gif";
}
</script>
</head>
<body>
<img id="pingouin" src="immobile.gif"
onmouseover="danser();"
onmouseout="attendre();"/>
</body>
</html>
Evénements du clavier
* Evénements que l'utilisateur déclenche avec le clavier
* Sont subis a priori par les zones de saisie
* keydown
* Déclenché lorsqu'une touche du clavier est enfoncée
* keyup
* Déclenché lorsqu'une touche du clavier est relâchée
* keypress
* Déclenché par l'appui sur une touche du clavier
(enfoncé puis relâché)
Exemple de gestion du clavier
<html>
<head>
<script type="text/javascript">
var n = 0;
function compter() {
n++;
document.getElementById("compteur").innerHTML = n;
}
</script>
</head>
<body>
<form>
<input type="text" onkeypress="compter();"/>
</form>
<p id="compteur"></p>
</body>
</html>
Evénements de formulaire
* Evénements que l'utilisateur déclenche en manipulant un formulaire
* Sont donc subis par les champs d'un formulaire
* Evénements liés au formulaire
* change
* Déclenché lorsque le contenu d'un élément est modifié
* Déclenché au moment de la perte du focus par l'élément
* submit
* Déclenché à la soumission d'un formulaire
* Code JavaScript retourne "true" ou "false" pour valider la soumission
* reset
* Déclenché à la réinitialisation du formulaire
* Evénements liés à une sélection
* focus
* Déclenché lorsque l'élément récupère le focus
* blur
* Déclenché lorsque l'élément perd le focus
* select
* Déclenché lorsqu'une partie du contenu de l'élément est sélectionnée
Exemple de gestion d'un formulaire
<html>
<head>
<script type="text/javascript">
function verifier() {
var annee = document.getElementById("annee").value;
if (annee >= 1900 && annee <= 2000) return true;
else {
alert("L'année doit être entre 1900 et 2000");
return false;
}
}
</script>
</head>
<body>
<form method="get" action="sauve.php" onsubmit="return verifier();">
<input type="text" name="annee" id="annee"/>
<input type="submit"/>
</form>
</body>
</html>
Evénements de page
* Evénements déclenchés par la navigation dans une page
* load
* Déclenché une fois que la page est chargée
* Utilisé sur la balise <body>
* unload
* Déclenché au moment où la page est quittée
* Utilisé sur la balise <body>
* error
* Déclenché suite à une erreur de chargement
* Utilisé sur la balise <img>
* abort
* Déclenché lorsque le chargement de la page est abandonné
* Utilisé sur la balise <img>
Exemple de gestion de la page
<html>
<head>
<script type="text/javascript">
var arrivee;
function debut() {
var date = new Date();
arrivee = date.getTime();
}
function fin() {
var date = new Date();
var duree = (date.getTime() - arrivee) / 1000;
alert("Vous êtes restés " + duree + " secondes sur la page.");
}
</script>
</head>
<body onload="debut();" onunload="fin();">
...
</body>
</html>