Liaison des gestionnaires d'événements aux éléments en JavaScript
Apprenons maintenant à faire réagir nos éléments DOM aux actions de l'utilisateur du site. Par exemple, l'utilisateur cliquera quelque part avec la souris, et notre code devra en réponse traiter ce clic et afficher à l'écran une information.
Les actions de l'utilisateur que nous pouvons suivre via JavaScript sont appelées événements. Les événements peuvent être les suivants : un clic de souris sur un élément de la page, le survol d'un élément avec la souris, ou inversement - le retrait du curseur de souris de l'élément, et ainsi de suite. De plus, il existe des événements indépendants des actions de l'utilisateur, par exemple, l'événement du chargement de la page HTML dans le navigateur.
Prenons par exemple le cas d'un bouton sur lequel, lors d'un clic, un texte sera affiché à l'écran. Commençons par créer le code HTML du bouton :
<input id="button" type="submit">
Obtenons maintenant une référence vers le bouton dans une variable :
let button = document.querySelector('#button');
Maintenant, nous devons définir la réaction de notre
bouton lors d'un clic. Pour cela, en JavaScript,
il existe une méthode spéciale addEventListener,
prenant comme premier paramètre le nom de l'événement
(le clic sur un bouton a pour nom 'click'),
et comme deuxième paramètre - une fonction de rappel (callback),
qui s'exécute lorsque cet événement se produit.
Faisons par exemple en sorte qu'un clic sur le bouton affiche un texte :
button.addEventListener('click', function() {
console.log('!!!');
});
Il y a 3 boutons :
<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">
Faites en sorte qu'un clic sur le premier bouton
affiche le nombre 1, un clic sur le deuxième - le nombre 2,
et un clic sur le troisième - le nombre 3.
