AddEventListener

4

Il existe une multitude d'évènements qui peuvent se produire sur une page web.

Par exemple:

  • Un élément cliqué ou encore survolé.
  • Une touche enfoncée.
  • Une fenêtre redimensionnée.
  • La fin du chargement d'une page.
  • L'envoi d'un formulaire.
  • Le démarrage d'une vidéo.
  • Etc.

Heureusement, il est possible d'écouter ces évènements et de leur attacher des actions personnalisées lorsqu'ils sont déclenchés.

Syntaxe

Par exemple, pour écouter un événement de type click avec une fonction classique:

document.addEventListener('click', function() { ... });

Avec une fonction fléchée:

document.addEventListener('click', () => { ... });

Dans ce cas-ci, nous avons:

  • document soit l'élément sur lequel nous désirons écouter un évènement.
  • addEventListener la commande qui indique que nous désirons ajouter un écouteur d'événement au précédent élément.
  • 'click' le nom de l'événement que nous désirons écouter.
  • function() { ... } une fonction, dans ce cas-ci anonyme, devant être exécutée lorsque l'évènement est déclenché.

Il aurait aussi été possible d'appeler directement une fonction plutôt qu'une fonction anonyme, en lui passant le nom de ladite fonction.

Par exemple:

const maFonction = function() { ... };

document.addEventListener('click', maFonction);

Appuyer sur le bouton codepen.io/smnarnold/pen/LYYYMNj

Événements

Un écouteur d'événement addEventListener retourne à la fonction qui lui est passée un objet détaillant l'événement qui vient de se produire.

Cet objet peut être nommé comme désiré. Cependant, vous le verrez généralement sous le nom event ou encore simplement e.

Affichez l'exemple ci-dessous dans CodePen et ouvrez la console de votre navigateur. Vous remarquerez que la fonction reçoit un paramètre nommé event. Lorsque ce paramètre est affiché dans la console, il est possible de voir qu'il s'agit d'un objet MouseEvent détaillant l'événement click venant de se produire.

Voir le CodePen de Simon Arnold (@smnarnold).

Revoici le même exemple, mais avec une fonction anonyme:

Voir le CodePen de Simon Arnold (@smnarnold).

Type d'évènements

Il existe plusieurs types d'événements. Voyons les plus courants:

Souris

  • click clic gauche de la souris 👆🖱️
  • contextmenu clic droit de la souris 🖱️👆
  • dblclick double clic gauche de la souris 👆👆
  • mouseup lorsque le clic de la souris est relâché
  • mouseover dès que la souris commence à survoler un élément
  • mousemove à chaque fois que la souris se déplace au dessus d'un élément
  • mouseout quand la souris cesse de survoler un élément

Notez que les événements de souris sont aussi déclenchés sur les appareils à écrans tactiles qui n'ont pas de souris.

Touche

Pour les appareils tactiles, sans souris, tels que les cellulaires 📱 et tablettes.

  • touchstart lors du contact initial avec l'écran
  • touchmove à chaque fois qu'un doigt se déplace sur l'écran
  • touchend lorsque le contact avec l'écran est rompu
  • touchcancel quand un contact doit être annulé. Par exemple, si trop de doigts touchent en même temps à l'écran.

Clavier

  • keydown lorsqu'une touche est enfoncée
  • keyup lorsqu'une touche est relâchée
  • input lorsqu'une touche est enfoncée et que le contenu du champ associé est modifié

Les événements retournés par les écouteurs d'événements de type clavier sont particulièrement utiles pour définir quelle touche a été activé.

Formulaire

  • focus lorsqu'un champ reçoit le focus. Par exemple, un champ cliqué obtient le focus.
  • blur quand un champ perd le focus.
  • change si la valeur d'un champ est différent au moment de perdre le focus qu'au moment de l'obtenir.
  • submit lorsqu'un formulaire est soumis.

Fenêtre

  • load la page et ses ressources ont fini de charger
  • scroll la fenêtre est défilée (scrollé)
  • resize la fenêtre est redimensionnée

Pour une liste plus exhaustive, voir la liste des événements sur MDN🦖

removeEventListener

Il est aussi possible de retirer un écouteur d'évènement grâce à removeEventListener.

Pour ce faire, il est important que la fonction soit nommée et non anonyme.

Par exemple:

document.removeEventListener('click', nomDeLaFonction);

Pour plus d'infos, voir l'article de Davide Rama sur removeEventListener publié sur Medium.com

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme