Contenu

I. Évènements ou événements en JavaScript

Depuis 1990, l'Académie française tolère les deux graphies et conseille même la nouvelle 'évènement', la plus logique, le 2e 'e' n'étant pas prononcé 'é', mais 'è'. Ceux que cela intéresse peuvent vérifier ici.

Déjà dans notre introduction, nous avions signalé que le langage JS était un langage évènementiel. Qu'est-ce à dire ?
L'internaute qui consulte vos pages Web, peut rester inactif... le JS ne va en rien réagir à ses actions... quoique... il cliquera sur un lien, sur un bouton que vous aurez créé, il arrivera sur une de vos pages, il déplacera sa souris, il touchera son écran, il survolera certaines zones de son écran avec sa souris, il complètera un formulaire que vous aurez conçu, etc.

Sans le vouloir, l'internaute qui visite vos pages est plus actif que vous ne le pensez... à vous donc de réagir à chacune de ses actions :

Il nous paraît évident que l'action la plus courante est le clic sur un bouton (comme ci-dessus), mais il existe des tas d'actions possibles, donc d'évènements possibles et applicables à différents objets en JS.
Par contre, en HTML pur, votre internaute visiteur ne disposait que d'une seule action possible : le clic sur un hyperlien défini par <a href="xxx">lien</a> qui permettait à votre internaute visiteur de suivre le lien que vous aviez fixé... c-à-d être transporté sur une autre page Web, éventuellement à un endroit fixé dans la page, si vous aviez fait usage d'ancre nommée dans votre document.

Le JS permet de détecter d'autres évènements et d'y réagir de façon adéquate.

La particularité du gestionnaire d'évènements est qu'ils ne doivent pas s'écrire entre les balises <script> et </script>. Nous avions déjà découvert cette caractéristique en employant le onLoad dans la balise <body> où les fonctions JS appelées ne sont pas notées entre des balises <script>, mais entre des guillemets derrière le mot clé appelant onClick= , cependant, les fonctions appelées doivent soit être prédéfinies ou définies préalablement entre des balises <script>.

Nous ne pourrons pas être exhaustifs concernant le gestionnaire d'évènements de JS. Cependant, nous nous proposons :
1.- de dresser une liste d'évènements qui peuvent être gérés par JS ;
2.- de montrer la syntaxe générale du gestionnaire d'évènements ;
3.- de montrer par deux exemples (onClick avec un bouton ordinaire et avec un radio bouton) la syntaxe à respecter ;
4.- dans le chapitre suivant, montrer divers exemples et leur code.

A. une liste d'évènements JS...

Il nous semble important d'établir une liste d'évènements auxquels JS peut réagir.

Description	mot-clé Évènement
Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément	onClick
Lorsque la page est chargée par le browser ou le navigateur	onLoad
Lorsque l'utilisateur quitte la page	onUnload
Lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout autre élément	onMouseOver
Lorsque le pointeur de la souris quitte un lien ou tout autre élément	onMouseOut
Lorsque l'utilisateur maintient la touche de souris appuyée	onMouseDown
Lorsque l'utilisateur, après avoir appuyé la touche de souris, la relâche	onMouseUp
Lorsque l'utilisateur bouge la souris indépendamment du fait que la touche en soit appuyée ou non	onMouseMove
Lorsque un élément de formulaire a le focus c-à-d devient la zone d'entrée active	onFocus
Lorsque un élément de formulaire perd le focus c-à-d que l'utilisateur clique hors du champ et que la zone d'entrée n'est plus active	onBlur
Lorsque la valeur d'un champ de formulaire est modifiée	onChange
Lorsque l'utilisateur sélectionne un champ dans un élément de formulaire	onSelect
Lorsque l'utilisateur clique sur le bouton Submit pour envoyer un formulaire	onSubmit
Lorsque l'utilisateur clique sur le bouton Reset d'un formulaire pour le réinitialiser	onReset
Lorsque l'utilisateur clique sur le bouton stop du navigateur, alors que tous les graphiques ne sont pas encore chargés	onAbort
Lorsque l'utilisateur double-clique sur un élément	onDblClick
Pour capter les messages d'erreur et les remplacer par des actions et/ou messages personnalisés. Attention pourtant, les erreurs ne sont pas pour autant écartées	onError
Lorsque l'utilisateur, alors qu'il a activé un élément, appuie sur une touche	onKeyDown
Lorsque l'utilisateur clique ou appuie sur une touche et la maintient appuyée	onKeyPress
Lorsque l'utilisateur clique ou appuie sur une touche et la relâche	onKeyUp
Lorsque l'utilisateur dépose un objet (un fichier par exemple) dans la fenêtre du navigateur Web à l'aide de la souris	onDragDrop
pas un événement au sens propre du terme syntaxe qui a été introduite pour noter du code JavaScript comme cible d'un lien	javascript:fonction();

Un programme est une succession d'étapes dont chacune peut éventuellement être décomposée en actions plus élémentaires réalisables par l'ordinateur.
Il n'est pas rare que des concepteurs de programmes lancent au démarrage d'une page web une fonction initiale (qu'ils appellent init(), par exemple).
À partir de cette fonction initiale, ils appellent d'autres fonctions qu'ils détailleront par la suite.

Nous avions signalé que certains tutoriels parlent de sous-fonctions... alors que cela n'existe pas en JS. Tout au plus, dans le cadre d'une conception objet, la fonction en question peut-elle effectivement être considérée comme une méthode mais privée.

Dans notre chapitre 6, section "appel d'une fonction", nous avons déjà
d'une part montré l'appel d'une fonction dans une autre fonction et
d'autre part, signalé la possibilité d'appeler une fonction dès l'ouverture d'une page HTML.
Nous pourrions donc appeler cette fonction, soit dès l'instant où la page est chargée dans l'ordinateur de l'internaute (c'est l'utilité de l'évènement onLoad), soit en imaginant un bouton, qui appellerait la fonction, si l'on clique sur ce bouton (c'est l'utilité de l'évènement onClick).

L'appel de cette fonction init() peut se faire dès le chargement d'une page par la formulation de la balise <body> du document HTML, on lira alors :
<body onLoad="init()">
qui illustrerait parfaitement l'évènement onLoad.
Cependant, comme le but de ce chapitre est d'illustrer l'évènement onClick sur un bouton, nous nous conformerons à ce parcours.

Rien à faire, sauf à tester le code ci-dessous :

Exemple

<html>
<head><title>fonction dans fonction</title></head>
<body>
<script type="text/javascript">

function premiere() {
        document.write("premiere etape<br>");
}

function seconde() {
        document.write("seconde etape<br>");
}

function depart() {
        premiere();
        seconde();
}

depart();

</script>
</body>
</html>

Un bref rappel ici : les noms de fonctions ne peuvent pas comporter de lettres accentuées.

B. syntaxe générale du gestionnaire d'évènements

Même si chaque évènement peut avoir quelques caractéristiques propres, on remarquera que la syntaxe générale du gestionnaire d'évènements est toujours la même :

onÉvènement="lafonction();"

on,
immédiatement suivi du nom d'un évènement
(sans accent et attention aux lettres capitales...
pas d'espace entre le 'on' et l'évènement),
signe =,
guillemets,
entre les guillemets, nom de la ou des fonctions appelées
avec point-virgule après chaque fonction.

Facile : un exemple illustré devrait vous aider.

C. Exemple : onClick avec un bouton

Reprenons l'exemple donné ci-dessus. Un bouton "Compris ?" au centre de la page et si l'on clique sur ce bouton, le message "J'espère bien !"... Comme cela :

La source de ce bouton magique ?

<form> <center> <input name="button" type="button" onClick="alert('J\'espère bien !')" value="Compris ?"> </center> </form>

Illustrons ce propos par un exemple plus simple dans la section suivante de ce chapitre.

II. L'évènement ONCLICK sur un bouton ou sur un bouton radio

voir suite >>>

III. Autres évènements onMouseover et onMouseout sur une image

voir suite >>>

VIII. Exercices relatifs aux évènements

voir suite >>>

IX. Test relatif aux évènements

voir suite >>>

test concernant la boucle WHILE (20.9)

| | L'évènement ONCLICK (21.2)