Skip to content

Gestion d'évènements dans une page

Évènements dans une page

Définition

L'utilisateur peut interagir avec une page web, il peut par exemple :

  • cliquer avec la souris sur un élément de la page ;
  • appuyer sur une touche de son clavier ;
  • passer son curseur au-dessus d'un élément de la page ;
  • etc...

Chacune de ces interactions avec la page engendre ce que l'on appelle un évènement qui peut être associé à une fonction JavaScript afin déclencher une action spécifique.

Exemples d'évènements

Voici quelques exemples d'évènements que Javascript est capable de gérer :

Nom de l'évènement Description
click Déclenché lorsque l'utilisateur clique gauche sur un élément de la page
mouseover Déclenché lorsque l'utilisateur passe le pointeur de sa souris au-dessus d'un élément
mouseout Déclenché lorsque le pointeur de la souris est déplacé hors d'un élément
mousemove Déclenché lorsque le pointeur de la souris se déplace alors qu'elle est au-dessus d'un élément
mouseup Déclenché lorsque l'utilisateur relâche le clic de la souris au-dessus d'un élément
keypress Déclenché lorsqu'une touche produisant une valeur de caractère est enfoncée. Des exemples de touches produisant une valeur de caractère sont les touches alphabétiques, numériques et de ponctuation

Exemple concret

Analysons l'exemple de JavaScript suivant :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8"/>
    <title>Javascript</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="code.js" defer></script>
</head>

<body>
    <p>J'adore la spécialité NSI !</p>
</body>
</html>

1
2
3
4
5
6
7
8
let paragraphe = document.querySelector('p');
paragraphe.addEventListener('click', mise_a_jour_paragraphe);

function mise_a_jour_paragraphe()
{
    let specialite = prompt("Entrer le nom d'une spécialité");
    paragraphe.textContent = "J'adore la spécialité " + specialite + " !";
}

JavaScript, comme la majorité des langages de programmation, permet de :

  • associer des valeurs à des variables :

    Ligne n°6 : La variable specialite est associé au nom saisi par l'utilisateur.


  • réaliser des "opérations" :

    Ligne n°7 : La chaîne de caractères saisie est concaténée afin d'afficher le texte souhaité dans l'élément paragraphe p.


  • autorise la définition de fonctions :

    Lignes n°4 à 8 : La fonction mise_a_jour_paragraphe(), qui correspond à un ensemble d'instructions, est définie pour être appelée au moment "opportun".


  • permet l'appel de fonctions en réponse à des évènements issus de l'interaction de l'utilisateur avec la page web :

    Lignes n°2 : La fonction mise_a_jour_paragraphe() est appelée lors de l'évènement "clic gauche" (click) sur l'élément paragraphe afin de mettre à jour ce dernier.


  • permet d'interagir avec la page web grâce aux interfaces de programmation applicatives (API en anglais) :

    JavaScript interagit ici avec l'API du navigateur web DOM (Document Object Model) afin de pouvoir "manipuler" (créer, modifier, appliquer un nouveau style ...) les codes HTML et CSS.

    Ici, la ligne 1, permet l'interaction avec l'élément p en vue de la modification de son contenu (voir la fonction mise_a_jour_paragraphe()).

Autre Exemple concret

Code HTML :

<!doctype html>

<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Survol</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="code.js" defer></script>
</head>

<body>
    <p id="p_survol">Survolez-moi avec le pointeur de votre souris !</p>
</body>

</html>

Code CSS :

html{
    width: 80%;
    margin: 0 auto;
}

p{
    font-size: 1rem;
    font-family: sans-serif;
    color: black;
    background-color: orange;
    text-align: center;
    height:50px;
    line-height: 50px;
    border-radius: 0px;
}

Code Javascript :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
let paragraphe_survol = document.querySelector("#p_survol");

/* Mise en place de la gestion de l'évènement lié au survol de l'élément via l'appel de la fonction modif_paragraphe() */
paragraphe_survol.addEventListener("mouseover", modif_paragraphe);

/* Définition de la fonction modif_paragraphe() */
function modif_paragraphe()
{
    paragraphe_survol.style.color = "white";
    paragraphe_survol.style.backgroundColor = "orangered";
    paragraphe_survol.style.borderRadius = "20px";
    paragraphe_survol.style.fontWeight = "bold";
}

Application

Exercice 17

Saisir et tester les codes précédents.

Indiquer précisément ce que permet le code JavaScript.

Indiquer ce qu'il se passe après l'évènement mouseover.

Proposer une modification du code Javascript afin que les propriétés de style du paragraphe reviennent à leurs états d'origine lorsque que la souris ne survol plus le paragraphe (pour cela ajouter une gestion de l'évènement mouseout).

Exercice 18

Soit le code ci-dessous. La page associée comporte deux boutons. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
    <style type="text/css">
        .rouge {
            color: red;
        }
        .vert {
            color: green;
        }
    </style>
</head>
<body>
    <p id="para">bonjour</p>
    <p class="rouge">rouge</p>
    <p class="vert">vert</p>
    <button onclick="fonction_rouge()">Rouge</button>
    <button onclick="fonction_vert()">Vert</button>
    <script>
        let objet_para = document.getElementById("para");
        objet_para.classList.add("rouge");
    </script>
</body>
</html>

Tester le programme précédent. Expliquer ce qu'il se passe.

Proposer une solution.

Compléter le code Javascript avec les fonctions suivantes :

1
2
3
4
5
6
7
8
function fonction_rouge() {
    objet_para.classList.remove("vert");
    objet_para.classList.add("rouge");
}
function fonction_vert() {
    objet_para.classList.remove("rouge");
    objet_para.classList.add("vert");
}

Tester le programme. Expliquer ce qu'il se passe.

Modifier les fonctions afin de changer aussi le contenu du paragraphe lorsque l’on clique sur les boutons.