Méthode addEventListener()
Généralités sur les événements en JavaScript
Nous avons vu qu'en JavaScript, un événement est une action qui se produit et qui possède deux caractéristiques essentielles :
C'est une action qu'on peut « écouter », c'est-à-dire une action qu'on peut détecter car le système va nous informer qu'elle se produit ;
C'est une action à laquelle on peut « répondre », c'est-à-dire qu'on va pouvoir attacher un code à cette action qui va s'exécuter dès qu'elle va se produire.
Pour écouter et répondre à un événement, nous allons définir ce qu'on appelle des gestionnaires d’événements.
Un gestionnaire d’événements est toujours divisé en 2 parties :
une partie qui va servir à écouter le déclenchement de l'événement,
une partie gestionnaire en soi qui va être le code à exécuter dès que l'événement se produit.
Aujourd'hui, en JavaScript, il existe 3 grandes façons d'implémenter un gestionnaire d’événements :
On peut utiliser des attributs HTML de type événement (non recommandé) ;
On peut utiliser des propriétés JavaScript liées aux événements ;
On peut utiliser la méthode addEventListener() (recommandé).
On préférera cette dernière méthode pour des raisons de performance et de fonctionnalités. Attardons nous sur cette dernière méthode puisque nous avons déjà vu les 2 premières.
Rappel : Méthode 1 : Attributs HTML de type événement
<button onclick="alert('Bouton cliqué')">Cliquez moi !</button>
<div onmouseover="this.style.backgroundColor='orange'"
onmouseout="this.style.backgroundColor='white'">
Rappel : Méthode 2 : Propriétés JavaScript liées aux événements
let button1 = document.querySelector('button');
let div1 = document.querySelector('div');
button1.onclick = function(){alert('Bouton cliqué')};
div1.onmouseover = function(){this.style.backgroundColor ='orange'};
div1.onmouseout = function(){this.style.backgroundColor='white'};
Méthode 3 : Utiliser la méthode addEventListener() pour gérer un événement
Cette dernière façon de gérer les événements est la manière recommandée aujourd'hui car c'est la plus flexible et la plus performante.
On va passer 2 arguments à cette méthode :
le nom d'un événement qu'on souhaite prendre en charge (il s'agit d'un type d'événement)
le code à exécuter (qui prendra souvent la forme d'une fonction) en cas de déclenchement de cet événement (autrement appelé écouteur)
On peut ajouter des arguments optionnels explicités ici : https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener
On va, par ailleurs, pouvoir utiliser la méthode addEventListener() pour réagir plusieurs fois et de façon différente à un même événement ou pour réagir à différents événements à partir de différents ou d'un même objet Element.
Différentes syntaxes possibles
Syntaxe : Ajouter un écouteur simple
Cet exemple montre comment utiliser addEventListener() pour surveiller les clics de souris sur un élément.
<table id="MonTableau">
<tr><td id="t1">un</td></tr>
<tr><td id="t2">deux</td></tr>
</table>
// Fonction pour changer le contenu de t2function modifierTexte() {
var t2 = document.getElementById("t2");
if (t2.firstChild.nodeValue == "trois") {
t2.firstChild.nodeValue = "deux";
} else {t2.firstChild.nodeValue = "trois";
}
}
// Ajouter un écouteur d'évènements à la tablevar el = document.getElementById("MonTableau");
el.addEventListener("click", modifierTexte, false);
Dans ce code, modifierTexte() est un écouteur pour les événements click enregistré en utilisant addEventListener(). Un clic n'importe où sur la table se propagera jusqu'au gestionnaire et exécutera modifierTexte().
Syntaxe : Écouteur d'événement avec une fonction anonyme
Ici, nous allons voir comment utiliser une fonction anonyme pour passer des paramètres à l'écouteur d'événements.
<table id="MonTableau">
<tr><td id="t1">un</td></tr>
<tr><td id="t2">deux</td></tr>
</table>
// Fonction pour changer le contenu de t2function modifierTexte(nouveau_texte) {
var t2 = document.getElementById("t2");
t2.firstChild.nodeValue = nouveau_texte;
}
// Fonction pour ajouter un écouteur d'évènement à la tablevar el = document.getElementById("MonTableau");
el.addEventListener("click", function(){modifierTexte("quatre")}, false);
Notez que l'écouteur est une fonction anonyme[1] encapsulant le code qui peut à son tour envoyer des paramètres à la fonction modifierTexte(), qui est responsable de la réponse effective à l'événement.
Si nous encapsulons pas modifierTexte("quatre") dans une fonction anonyme, la modification se propagera immédiatement.
Syntaxe : Écouteur d'événement avec une fonction fléchée
Cet exemple montre un écouteur d'événement simple implémenté en utilisant la notation de fonction fléchée.
<table id="MonTableau">
<tr><td id="t1">un</td></tr>
<tr><td id="t2">deux</td></tr>
</table>
// Fonction pour changer le contenu de t2function modifierTexte(nouveau_texte) {
var t2 = document.getElementById("t2");
t2.firstChild.nodeValue = nouveau_texte;
}
// Ajouter un écouteur d'évènements à la table avec une fonction fléchéevar el = document.getElementById("MonTableau");
el.addEventListener("click", () => { modifierTexte("quatre"); }, false);