Un event est un mécanisme permettant de redonner le control au programme après le déclanchement d'un événement par l'usager ou le fureteur lui-même.
La mécanique
Un event est toujours associé à un élément HTML ou à un objet Javascript. Pour permettre à notre programme de réagir au déclenchement d'un événement en particulier, nous devons associer l'objet et le nom de l'event à une fonction de notre programme (appelée "écouteur").
document.body.addEventListener("click", e => {
console.log("ouch");
});
Le code ci-dessus associe le clic de la souris sur le body de la page à une fonction anonyme.
Il existe plusieurs façons d'ajouter un écouteur d'événement à un élément HTML, mais celle-ci est la plus flexible et celle qui est applicable dans presque toutes les situations.
Les types d'événements
Il serait laborieux de tenter ici de nommer tous les événements possibles, car ceux-ci sont innombrables. Heureusement, la manière de fonctionner de chaque événement varie très peu. Voici donc les événement que l'on utilisera le plus :
Événements de souris
click Lorsque l'on clique sur un élément.
mousedown/mouseup Avant le clic lorsqu'on enfonce ou relâche le bouton sur un élément.
mousemove Lorsque la souris se déplace sur un élément.
keydown/keyup Lorsqu'une touche est enfoncée/relâchée.
keypress Lorsqu'un caractère est produit.
Événements du fureteur
load Lorsque la page est chargée.
scroll Lorsque la page défile.
Événements d'animation
transitionend/animationend Lorsqu'une transition/animation se termine sur l'élément.
Événements de formulaire
submit Lorsqu'un formulaire se fait envoyer.
focus/blur Lorsqu'un élément reçoit/perd le focus.
change/input Lorsqu'un élément de formulaire est modifié.
La propagation
Si on clique sur le mot moi dans l'exemple de gauche, est-ce que l'on clique sur le em (encadré en blanc), sur le h2 (avec un fond vert) sur le section (en rose) ou sur le body ? La réponse est : toutes ces réponses.
À suivre...
L'objet Event
document.body.addEventListener("click", e => {
if (e.shiftKey === true) {
e.currentTarget.innerHML = "";
}
});
Le code ci-dessus vide le contenu de la page si le body est cliqué en maintenant le shift enfoncé.
La fonction "écouteur" reçoit toujours en paramètre un objet de type "Event", qui nous permet d'en savoir plus sur l'événement qui a causé son execution. En voici quelques-uns:
Propriété de l'objet Event
e.target Donne l'élément DOM qui a déclanché l'événement.
e.currentTarget Donne l'élément DOM sur lequel est appliqué l'écouteur.
e.shiftKey Booléen. Indique si la touche MAJUSCULE était enfoncée lors du déclenchement de l'événement. Il existe également e.ctrlKey, e.altKey et e.metaKey.
e.clientX/e.clientY Indique la position du curseur lors du déclenchement de l'événement.
