Grâce aux événements JavaScript, il est possible de lancer une action lorsque quelque chose se produit, par exemple lorqu'un bouton est cliqué ou lorsqu'une case de saisie perd le focus.
Le code à exécuter sera généralement placé dans une fonction. Cette fonction est désignée sour le nom gestionnaire d'événement ou fonction de rappel. En anglais, on dira event handler ou callback function.
Il existe deux principales techniques pour associer un gestionnaire à un événement :
ou
En JavaScript pur, il est possible d'utiliser la méthode addEventListener() pour associer du code à un événement.
let code = document.getElementById('code');
if (code != null) {
code.addEventListener('blur', validerCode);
}
Remarquez qu'il ne faut pas mettre de parenthèses après le nom du gestionnaire d'événement : on n'est pas en train d'exécuter la fonction, on ne fait que dire ce qui devra être fait lorsque l'événement surviendra.
Ainsi, lorsqu'on attache un gestionnaire à un événement, c'est JavaScript qui se chargera d'appeler la fonction lorsque l'événement surviendra.
Parmi les événements disponibles avec addEventListener(), notons :
Il existe de nombreux autres événements disponibles. La liste d'événements que vous pouvez utiliser dépend du type d'objet auquel vous désirez attacher un gestionnaire.
Il n'est pas nécessaire de connaître précisément la hiérarchie des classes JavaScript pour s'y retrouver. Sachez seulement que certains événements ne sont disponibles que pour certains objets.
Vous trouverez les différents événements dans l'une des pages suivantes :
Il est également possible de travailler avec des propriétés de l'élément.
Le nom de la propriété est généralement composée de « on » suivi du nom de l'événement, par exemple :
Remarquez que la propriété onkeypress, associée à l'événement keypress, est obsolète. Il faut utiliser onkeydown.
Le code qui suit fait à peu près la même chose que le addEventListener(). Il existe cependant de petites différences.
Entre autres, addEventListener() permet d'attacher plusieurs gestionnaires à l'événement alors que les propriétés écrasent ce qui était déjà attaché avant d'attacher le nouveau code.
let code = document.getElementById('code');
if (code != null) {
code.onblur = validerCode;
}
Pour assigner un gestionnaire à un événement, il faut utiliser l'une ou l'autre de ces techniques mais pas les deux.
Voici deux exemples de code à éviter puisqu'ils assignent deux fois le gestionnaire à l'événement.
monformulaire.addEvenListener('submit', function (event) {
});
monformulaire.onsubmit = function (event) {
});
Le gestionnaire d'événement, recevra automatiquement en paramètre un objet qui représente l'événement qui vient d'avoir lieu.
Il sera possible d'obtenir différentes informations à partir de cet objet.
Dans cet exemple, on s'en sert pour récupérer l'information qui est entrée dans la balise <input>.
function validerCode(event) {
let valeur = event.target.value;
...
}
Dans les extraits de code précédents, on a travaillé avec une fonction nommée. Le gestionnaire d'événement peut également être une fonction anonyme.
L'objet event peut être utilisé dans les deux cas.
let code = document.getElementById('code');
if (code != null) {
code.onblur = function (event) {
let valeur = event.target.value;
...
};
}
Il existe une autre syntaxe pour définir des fonctions anonymes : les fonctions fléchées. On les appelle aussi fonctions lambda.
Les fonctions fléchées ont été crées afin d'alléger la syntaxe et pour régler quelques technicalités qui dépassent le but de cette formation.
La transformation consiste à enlever le mot function puis à ajouter une flèche (=>) entre la parenthèse fermante et l'accolade ouvrante.
let code = document.getElementById('code');
if (code != null) {
code.onblur = (event) => {
let valeur = event.target.value;
...
};
}
À vous de déterminer la syntaxe qui vous plaît le plus.
Voici une technique intéressante pour associer rapidement un gestionnaire d'événement à plusieurs éléments.
Dans cet exemple, chaque balise <input> passera dans la moulinette dès qu'elle perd le focus.
let inputs = document.getElementsByTagName('input');
for (let input of inputs) {
input.onblur = function (event) {
...
};
}
Dans l'exemple qui suit, tous les attributs qui ont la classe hautpage feront défiler la page jusqu'en haut lorsqu'on cliquera dessus.
Remarquez l'instruction event.preventDefault(). Elle assure que le comportement natif de la balise ne sera pas exécuté. Par exemple, si on clique sur un lien, on ne veut pas que la page soit automatiquement changée pour l'attribut href.
let liens = document.getElementsByClassName("hautpage");
for (let lien of liens) {
lien.onclick = function (event) {
event.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth',
});
};
}
Autrefois, on utililsait des attributs HTML pour associer les gestionnaire aux événements.
<input type="button" id="recalculer" value="Recalculer" />
Le site MDN est clair : il ne faut plus utiliser cette technique. Les techniquess présentées plus haut offrent l'avantage de mieux séparer le code HTML du code JavaScript puisqu'on n'aura pas à imbriquer un appel JavaScript à l'intérieur de la balise.
De plus, grâce aux techniques de sélection d'éléments, il est possible d'assigner d'un seul coup un traitement JavaScript à un groupe d'éléments HTML, tel que démontré plus haut.
« element - Événements ». MDN. https://developer.mozilla.org/fr/docs/Web/API/Element#%C3%A9v%C3%A8nements
« La gestion d’évènements en JavaScript et la méthode addEventListener ». Pierre Giraud. https://www.pierre-giraud.com/javascript-apprendre-coder-cours/addeventlistener-gestion-evenement/
▼Publicité
