Réagir à des événements :

Jusqu’à présent, notre code s’est toujours exécuté de manière séquentielle : d’abord la première instruction, puis la seconde, et ainsi de suite jusqu’à ce que toutes les instructions aient été exécutées, on va aborder une nouvelle manière d’envisager la programmation, avec la programmation événementielle, c'est-à-dire lors d'un déclenchement, ce qui correspond à une action spécifique, comme par exemple le clic sur un bouton, ou la frappe d’un clavier.
Ainsi, la programmation événementielle consiste à réagir à ces événements et exécuter du code au moment où ces événements se produisent.
Pour implémenter cela, on doit d’abord dire à JavaScript d'écouter les événements grâce à un "eventListener", (écouteur d’événement, traduit en français) qui est une méthode fournie par JavaScript.
Puis, nous devons lier l’événement à un bloc de code.

Pour cet exemple, partons d'un code html :

<span><button id="monBouton1">Bouton 1</button>
<button id="monBouton2">Bouton 2</button>
</span>

Ici, on définnie une fonction avec le mot-clé function, cette fonction n’a pas de nom, c’est ce qu’on appelle une fonction anonyme, elle est créée au moment où nous faisons notre "addEventListener".

monBouton1.addEventListener("click", function () {
console.log("Vous avez cliqué sur le bouton 1")
}); 

Si on exécute ce code, le console.log ne s’affichera pas, car on a simplement ajouté un écouteur d’événement, on a dit à ce dernier : “Lorsque l’événement "click" se produit sur "monBouton1", alors tu vas exécuter la fonction que je te donne”.
Par conséquent, tant qu’on ne clique pas sur le bouton, il ne se passe rien. En revanche, le console.log apparaîtra à l’instant où on cliquera dessus.

Dans l’exemple précédent, pour créer une fonction nous avons utilisé le mot-clé function. Cependant, pour corriger certains soucis notamment liés à la manipulation des objets et à la performance, JavaScript a introduit une autre notation : les fonctions fléchées.

monBouton2.addEventListener("click", () => {
console.log("Vous avez cliqué sur le bouton 2")
 });

Le mot "function" est supprimé, ensuite viennent les parenthèses vides, suivi d'une flèche, puis viennent les accolades
En dépit de ces modifications, le fonctionnement reste le même. La fonction fléchée sera appelée à chaque fois que l’utilisateur va cliquer sur "monBouton2".

Il arrive régulièrement que l’on souhaite avoir des informations sur l’événement qui vient de se dérouler, sur quel élément l’utilisateur a-t-il cliqué ? Sur quelle touche du clavier l’utilisateur a-t-il appuyé ?

Un exemple classique est la gestion du clavier, lorsque l’on appuie sur une touche, l’événement appelé se déclenche, on peut écouter cet événement grâce à addEventListener, mais comment savoir quelle touche a été pressée ?
Pour cela, on va utilisé la méthode "event", on va créer un fonction qui nous indique sur quelle touche que l'on vient d'appuyer :

Exemple :

document.addEventListener('keydown', (event) => {
console.log(event.key);
}); // si j'appuie sur la touche "f", la lettre "f" s'affichera dans la console.

Entre les parenthèses est apparue une nouvelle variable appelée event. Cette variable est fournie directement par JavaScript. C’est un objet qui contient toutes les informations liées à l’événement.
Ici, ce code affiche dans la console toutes les touches sur lesquelles nous pressons.

Jusqu'a maintenant, on a déclaré des variables pour utiliser une fonction, sachez qu'il n'est pas obligatoire de déclarée une variable, on peut faire la même chose sans déclaration de variable.

Pour l'exemple, on créer un div avec une class "border" et un paragraphe avec l'id "aVider", ce sera l'élément à vider, on va aussi créer un bouton qui va servir à vider le contenu :

<div class="border"><p id="aVider">Élément à vider.</p></div> 
<p><button id="boutonVider">A vider</button></p>

On créer la variable "aVider" et on lui demande de sélectionner l'id "aVider" :

 const aVider = document.getElementById("aVider");

Ensuite, on lui demande d'écouter l'événement et d'exécuter l'action au moment où l'on clique

boutonVider.addEventListener("click", function () {
const vide = document.getElementById("aVider"); 
vide.remove("aVider");
});

A vider

Maintenant, le même code sans déclarer une variable, il faut quand même lui indiquer sur quel bouton il doit interagir, sinon, le code fonctionnera avec n'importe quel bouton de la page.

boutonVider.addEventListener("click", function () {     
document.getElementById("aVider").remove("aVider");
});

~~ Fin ~~