Cours 3.6. Les événements en JavaScript

Si vous suivez ce cours depuis le début, vous avez compris que :

le HTML sert à décrire le contenu des pages ;
le CSS sert à décrire la mise en forme.

La raison d'être du JavaScript est gérer les interactions entre l'utilisateur et la page (HTML/CSS). Ces interactions sont déclenchées par une action (généralement de l'utilisateur). Par exemple :

un élément de la page est cliqué
la souris est déplacée
une touche est appuyée
...

Ces actions sont appelées événements en JavaScript. Un événement est composé de deux parties :

l'action qui le déclenche (la cause)
et l'action qui sera engendrée par l'événement (la conséquence)

Par exemple, si une alerte s'affiche quand on clique sur un bouton :

le clic sur le bouton est le déclencheur de l'événement (la cause) ;
l'alerte est l'action déclenchée par l'événement (la conséquence).

Les mécanismes d'événements sont très puissants et permettent de réaliser une inifinité d'interactions parfois très complexes. Aujourd'hui, la majorité des jeux vidéos en ligne (comme slither.io par exemple) sont écrits en JavaScript.

Nous allons commencer par la syntaxe la plus simple, qui consiste à écrire l'événement directement dans l'attribut d'une balise HTML :

<balise cause='conséquence'>

Exemple

L'exemple ci-dessous déclenche une alerte lorsque l'utilisateur clique sur le texte du paragraphe ().

<p onclick="alert('Vous avez déclenché un événement en cliquant.')">
  Cliquez ici pour afficher une alerte.
</p>

Voici le résultat :

Tester l'exemple en ligne

Dans l'exemple ci-dessus, nous avons un paragraphe dans des balises . Ces balises comportent un attribut onclick qui indique qu'un événement se déclenchera si l'utilisateur clique dans ce paragraphe.

L'attribut onclick contient des instructions en JavaScript, ici une alerte.

This

this est un mot-clé du JavaScript qui désigne l'élément courant. Dans l'exemple précédent, this représenterait le paragraphe  dans lequel se trouve l'attribut onclick.

this permet de modifier le contenu ou les propriété de cet élément. L'exemple ci-dessous permet de changer le texte du paragraphe quand on clique dessus :

<p onclick="this.innerText='Le texte a changé.' ">
    Cliquez ici changer le texte.
</p>

Tester l'exemple en ligne

Analysons le code de l'attribut onclick :

this.innerText='Le texte a changé.'

this est l'élément courant (ici la balise  dans laquelle se trouve l'événement)
innerText est un mot-clé qui décrit le texte contenu dans la balise (inner text = texte intérieur)
'Le texte a changé.' est la chaîne de caractères (le texte) que nous allons écrire dans les balises

Au final, on remplace le texte contenu entre les balises.

Evénements les plus courants

Le tableau ci-dessous liste quelques événements parmi les plus fréquents :

Événement	Description
`onchange`	Un élément HTML a été modifié
`onclick`	L'utilisateur a cliqué sur un élément HTML
`oncontextmenu`	L'utilisateur ouvre un menu contextuel (click droit)
`onmouseover`	La souris entre sur l'élément
`onmouseout`	La souris sort de l'élement
`onkeydown`	L'utilisateur appuie sur une touche du clavier
`onload`	Le navigateur a fini de charger la page

Exercices

Exercice 1

Dans le code HTML ci-dessous, ajouter un événement qui ouvre une alerte quand on clique sur l'image. L'alerte doit afficher le texte : On ne touche pas Chuck Norris.

<img src="https://lucidar.me/fr/web-dev-class/files/chuck-norris.jpg" height="300">

Voici le résultat escompté :

Faire l'exercice en ligne

Solution

Exercice 2

Complétez le code de l'exercice 1 afin qu'une alerte affiche Image protégée par Chuck Norris. si l'utilisateur tente d'ouvrir le menu contextuel de l'image (click droit). Voici le résultat escompté :

Pour éviter que le menu ne s'ouvre en plus de l'alerte, il faut ajouter une deuxième instruction : return false;. N'oubliez pas de séparer les instructions par des points-virgules.

Faire l'exercice en ligne

Solution

Exercice 3

Écrire une page HTML selon le modèle ci-dessous. Lorsque l'utilisateur clique pour voir la réponse, le texte est remplacé par la réponse. Voici le résultat escompté :

Faire l'exercice en ligne

Solution

Exercice 4

Modifier le code de l'exercice précédent afin que :

la réponse s'affiche quand on passe la souris dessus ;
la réponse s'efface quand on retire la souris de la réponse.

Faire l'exercice en ligne

Solution

Quiz

Quel language permet de décrire le contenu des pages web ?

HTML

CSS

JavaScript

PHP

Vérifier

Quel language permet de décrire la mise en forme des pages web ?

HTML

CSS

JavaScript

PHP

Vérifier

Quel language permet de gérer les interaction sur le pages web ?

HTML

CSS

JavaScript

PHP

Vérifier

Quel language permet de programmer un serveur web ?

HTML

CSS

JavaScript

PHP

Vérifier

Quel attribut permet de déclencher un événement quand on appui sur une touche du clavier ?

onclick

onchange

onkeydown

onkeyboard

Vérifier Bravo ! Pour être précis, onkeydown déclenche l'événement quand la touche est enfoncée.

Dans le code ci-dessous, à quoi se réfère this ?

<p onclick="this.innerText='Le texte a changé.' ">
    Cliquez ici changer le texte.
</p>

La dernière variable utilisée.

L'attribut onclick.

La balise .

Le texte contenu dans la balise .

Vérifier Bravo ! this est l'élement courant. Dans notre cas, c'est la balise tout entière.

Cours 3.5 Sommaire Cours 3.7

Voir aussi

Dernière mise à jour : 07/10/2022