Les évènements

42min
il y a 9 ans
Télécharger la vidéo

Ce tutoriel est déprécié ! Un tutoriel plus récent est maintenant disponible : Les écouteurs d'évènements.

Résumé Support

Jusqu'à maintenant nous avons créé des scripts qui se déroulent dès le chargement de la page. La pluspart du temps on attendra un évènements 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 écouter

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).

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)