AddEventListener()
Plusieurs événements peuvent-être déclenchés sur une page. Heureusement, il est possible d'écouter ces événements grâce à la méthode addEventListener()
et de déclencher une fonction en guise de rétroaction.
Par exemple, un internaute peut cliquer sur un bouton (événement). Puisque cet événement est anticipé (écouté), un item est ajouté dans un panier lorsqu'il se produit (fonction).
Prenons un exemple encore plus simple. Un bouton HTML sur lequel nous désirons écouter les événements de type "click" afin d'écrire "Bonjour" dans la console lorsqu'il est cliqué.
<button class="btn">Afficher un message</button>
Il serait possible en JavaScript de faire:
const btn = document.querySelector('.btn');
function showMsg() {
console.log("Bonjour");
}
btn.addEventListener("click", showMsg);
Anatomie
const btn
Variable contenant l'élément sur lequel l'événement devrait se produire.
function showMsg()
Fonction écrivant "Bonjour" dans la console.
addEventListener("click", showMsg)
addEventListener
indique qu'un événement doit être écouté sur l'élément se trouvant à la gauche du point (btn
). La chaine de caractères "click" correspond au nom du type d'événement à écouter et l'élément après la virgule (showMsg
) à la fonction à appeler lorsque l'événement se produit.
Fonction anonyme
Certaines fonctions ne sont utiles que dans un contexte précis, par exemple lorsqu'un événement se produit. Dans ce cas, il est superflus de leurs attribuer un nom afin de pouvoir les invoquer ailleurs. Ces fonctions sont connues sous le nom de fonctions anonymes.
Par exemple:
const btn = document.querySelector('.btn');
btn.addEventListener("click", function() {
console.log("Bonjour");
});
L'objet d'événement
Dès qu'un événement se produit, JavaScript génère un objet contenant le détail de l'événement en question et le passe à la fonction invoquée.
Exemple d'objet d'événement:
MouseEvent {
ctrlKey: false,
target: div.btn,
x: 100,
y: 200,
...
}
Cet objet nous indique par exemple si la touche ctrl
était enfoncée au moment du clic, quel élément a été cliqué, à quelle position X et Y le clic a eu lieu, ainsi que plusieurs autres informations utiles.
Pour récupérer cet objet, il suffit de nommer un paramètre dans la fonction appelée. Ce paramètre est souvent nommé "event" ou "e" par convention, mais il pourrait porter n'importe quel nom.
Fonction standard
function showMsg(event) {
console.log(event);
}
btn.addEventListener("click", showMsg);
Puisque le premier paramètre envoyé à une fonction invoquée via addEvenListener
est toujours l'objet de l'événement même, il suffit de nommer l'objet reçu afin de pouvoir y faire référence.
Fonction anonyme
btn.addEventListener("click", function(event) {
console.log(event);
});
Tout comme les fonctions standards, il suffit de nommer un paramètre dans la fonction invoquée afin d'avoir accès à l'objet de l'événement.