Formation Apprendre le JavaScript : Les écouteurs d'évènements

Jusqu'à maintenant nous avons créé des scripts qui se déroulent dès le chargement de la page. La plupart du temps on attendra un évènement pour effectuer une action. Par exemple, nous allons déclencher une action lors d'un clic sur un élément particulier. Pour faire cela on va avoir besoin d'utiliser un écouteur d'évènement grâce à la méthode addEventListener.

Créer un écouteur

element.addEventListener("Type d'évènement", callback) 
// Par exemple pour détecter un clic sur un lien 
element.addEventListener('click', function () {
    window.alert('Vous avez cliqué sur le lien') 
})

L'ensemble des évènements écoutables sont listés sur la documentation.

L'évènement

Le callback passé en second paramètre prend en paramètre l'évènement (le type de la variable dépendra de l'évènement écouté).

// Par exemple pour détecter un clic sur un lien 
element.addEventListener('click', function (e) {
    e.preventDefault() // Annule l'évènement
    e.stopPropagation() // Empèche l'évènement de remonter vers les éléments parents
    e.target // contient l'élément sur lequel on a cliqué
    e.currentTarget // contient l'élément sur lequel on a greffé l'écouteur 
})

Cet évènement peut aussi permettre d'obtenir plus d'informations suivant les cas (la touche sur laquelle on a appuyé, la position de la souris...)

this

Lorsqu'un écouteur est appellé la variable this fera systématiquement référence à l'élément sur lequel on écoute l'évènement (équivalent à currentTarget).

Les options

Il est possible d'ajouter un troisième paramètre qui est un objet qui peut prendre 3 propriétés

• once, est un booléen permettant d'indiquer si l'évènement doit être écouté qu'une seule fois
• passive, est un booléen qui, si true, indique que la fonction spécifiée par listener n'appellera jamais preventDefault(). Certains évènements sont passifs par défaut et il faudra mettre cette valeur à false si vous rencontrez des erreurs (plus d'information sur la documentation).
• capture, est un booléen qui indique si le listener doit être enregistré avant d'être distribué aux éléments enfants.

Supprimer un évènement

Il est aussi possible de supprimer un écouteur d'évènement à l'aide de la méthode removeEventListener. Cette méthode prendra les mêmes paramètres que la méthode addEventListener.

var next = function () {
    this.classList.add('red')
    this.removeEventListener('click', next)
}
element.addEventListener('click', next)