Gestion des évènemnts avec JavaScript⚓︎
Revenons au évènements⚓︎
Associer les évènements à des commandes JavaScript
Afin d'exécuter ces actions, il faut associer les commandes JavaScript à des évènements. On peut par exemple associer un script au fait de cliquer sur un bouton.
Exercice 7
On considère le script suivant :
<!DOCTYPE HTML>
<html>
<head>
<title>Clic si tu oses</title>
<meta charset="utf-8">
<script type="text/javascript">
let compteur = 0;
function suivant () {
compteur = compteur + 1;
let v = document.getElementById("valeur");
v.innerHTML = compteur;
}
</script>
</head>
<body>
<button onclick="suivant();">Clic !</button>
<span id="valeur">0</span>
</body>
</html>
Créez un fichier clicker.html et recopiez le code ci-dessus.
Explications
On remarque que lorsqu'on clic sur le bouton, le compteur augmente. La page n'est pas rechargée et aucun appel au serveur n'est fait. C'est parce qu'à chaque clic sur le bouton, la commande suivant() est appelée. Cet évènement est relié au bouton par l'attribut onclick.
Programmation évènementielle
Le code JavaScript est interprété lors de l'affichage de la page. Le navigateur transforme la page en une structure d'arbre, avec des éléments (les nœuds) et les sous-éléments (les fils). À chaque rafraîchissement de l'écran, les évènements sont générés :
- Est-ce qu'on a cliqué ?
- Est-ce que la souris a bougé ?
- Est-ce qu'on a modifié une valeur dans un formulaire ?
- ...
Ces évènements sont interceptés par les gestionnaires qui écoutent et s'exécutent dès que l'évènement attendu est activé. Le code JavaScript correspondant est alors activé, modifiant éventuellement le contenu de la page, qui est alors affiché et ainsi de suite.
On parle de programmation évènementielle. Le code est exécuté en fonction des évènements qui sont déclenchés.
Les attributs
Il existe de nombreux attributs liés aux évènements, comme ondblclic pour un double-clic, onkeypress pour une touche du clavier pressée, onmouseover pour le survol de l'élément par la souris\ldots Il est possible de rajouter ces attributs sur n'importe quelle balise HTML et pas uniquement sur les boutons.
Organisation du code
Comme pour le code CSS, il est préférable de séparer le code HTML du code JavaScript. Il est conseillé de modfier le fichier précédent de la manière suivante :
<!DOCTYPE HTML>
<html>
<head>
<title>Clic si tu oses</title>
<meta charset="utf-8">
<script type="text/javascript" src="code.js" defer="defer">
</script>
</head>
<body>
<button id="bouton">Clic !</button>
<span id="valeur">0</span>
</body>
</html>
Le code de code.js est le suivant :
let compteur = 0;
function suivant() {
compteur = compteur + 1;
let v = document.getElementById("valeur");
v.innerHTML = compteur;
}
let b = document.getElementById("bouton");
b.addEventListener("click", suivant);
Exercice 8
Modifiez clicker.html et créez code.js avec le code ci-dessus.
Explications
On peut remarquer que l'attribut onclick a disparu. À la place, dans code.js, on ajoute un gestionnaire d'évènement qui associe la fonction suivant() au clic sur le bouton.
L'attribut defer lors de l'appel du fichier code.js indique qu'il doit être chargé à la fin du chargement de la page.
Un autre exemple⚓︎
Un autre exemple
On considère les fichiers flou.html, flou.css et flou.js suivants :
<!DOCTYPE HTML>
<html>
<head>
<title>Où sont mes lunettes ?</title>
<meta charset="utf-8">
<script type="text/javascript" src="flou.js" defer="defer">
</script>
<link rel="stylesheet" href="flou.css">
</head>
<body>
<div>Bonjour !</div>
<div>C'est moi ou c'est illisible votre truc ?</div>
<div>C'est vraiment flou.</div>
</body>
</html>
div {
font-size: 40px;
filter: blur(10px);
}
let divs = document.querySelectorAll('div');
function alterner(elem) {
if (elem.style.backgroundColor == "blue") {
elem.style.backgroundColor = "";
elem.style.color = "";
} else {
elem.style.backgroundColor = "blue";
elem.style.color = "yellow";
}
}
for (var i = 0; i < divs.length; i++) {
// version avec attributs
divs[i].onmouseover = function(){this.style.filter = "blur(0px)"};
divs[i].onmouseout = function(){this.style.filter = "blur(10px)"};
// version avec gestionnaire d'évènement
divs[i].addEventListener("click", function() { alterner(this); });
};
Exercice 9
Créez les fichiers ci-dessus et ouvrir flou.html.
Explications
Dans cet exemple, nous utilisons deux façons pour rajouter la gestion des évènements. La deuxième version, avec gestionnaire d'évènement est généralement considéré comme préférable.