Gestionnaires d'événements JavaScript - Comment gérer les événements dans JS

Que sont les événements?

Les événements sont des actions qui se produisent lorsqu'un utilisateur interagit avec la page, comme cliquer sur un élément, saisir un champ ou charger une page.

Le navigateur informe le système que quelque chose s'est produit et qu'il doit être traité. Il est géré en enregistrant une fonction, appelée an event handler, qui écoute un type d'événement particulier.

Que signifie «gérer un événement»?

Pour le dire en termes simples, considérez ceci - supposons que vous êtes intéressé à assister à des événements de développement Web dans votre communauté locale.

Pour ce faire, vous vous inscrivez à un meetup local appelé "Women Who Code" et vous vous abonnez aux notifications. De cette façon, chaque fois qu'un nouveau rendez-vous est programmé, vous êtes alerté. C'est la gestion des événements!

L '"événement" ici est un nouveau meetup JS. Lorsqu'un nouveau meetup est posté, le site web meetup.com détecte ce changement, "gérant" ainsi cet événement. Il vous notifie alors, prenant ainsi une «action» sur l'événement.

Dans un navigateur, les événements sont traités de la même manière. Le navigateur détecte un changement et alerte une fonction (gestionnaire d'événements) qui écoute un événement particulier. Ces fonctions exécutent ensuite les actions souhaitées.

Regardons un exemple de clickgestionnaire d'événements:

 Press 1 Press 2 Press 3 const buttonContainer = document.querySelector('.buttons'); console.log('buttonContainer', buttonContainer); buttonContainer.addEventListener('click', event => { console.log(event.target.value) }) 

Quels sont les différents types d'événements?

Un événement peut être déclenché à chaque fois qu'un utilisateur interagit avec la page. Ces événements peuvent être un utilisateur faisant défiler la page, cliquant sur un élément ou chargeant une page.

Voici quelques événements courants - onclickdblclickmousedownmouseupmousemovekeydownkeyuptouchmovetouchstarttouchendonloadonfocusonbluronerror onscroll

Différentes phases d'événements - capture, cible, bulle

Lorsqu'un événement se déplace dans le DOM - qu'il s'agisse d'une bulle ou d'un ruissellement -, il est appelé propagation d'événement. L'événement se propage à travers l'arborescence DOM.

Les événements se produisent en deux phases: la phase de bouillonnement et la phase de capture.

Dans la phase de capture, également appelée phase de ruissellement, l'événement «se répercute» sur l'élément qui a provoqué l'événement.

Il commence à partir de l'élément de niveau racine et du gestionnaire, puis se propage jusqu'à l'élément. La phase de capture est terminée lorsque l'événement atteint le target.

Dans la phase de bulle, l'événement est "bullé" jusqu'à l'arborescence DOM. Il est d'abord capturé et géré par le gestionnaire le plus interne (celui qui est le plus proche de l'élément sur lequel l'événement s'est produit). Il bouillonne ensuite (ou se propage) vers les niveaux supérieurs de l'arborescence DOM, plus loin jusqu'à ses parents, puis enfin jusqu'à sa racine.

C'est une astuce pour vous aider à vous souvenir de ceci:

trickle down, bubble up 

Voici une infographie de quirksmode qui explique très bien cela:

 / \ ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 | | | | | ------------------------- | | Event BUBBLING | ----------------------------------- | | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 \ / | | | ------------------------- | | Event CAPTURING | ----------------------------------- 

Une chose à noter est que, si vous enregistrez un gestionnaire d'événements dans l'une ou l'autre des phases, les deux phases se produisent TOUJOURS. Tous les événements bouillonnent par défaut.

Vous pouvez enregistrer des gestionnaires d'événements pour la phase, le bouillonnement ou la capture, à l'aide de la fonction addEventListener(type, listener, useCapture). Si useCaptureest défini sur false, le gestionnaire d'événements est en phase de bouillonnement. Sinon, c'est en phase de capture.

L'ordre des phases de l'événement dépend du navigateur.

Pour vérifier quel navigateur honore la capture en premier, vous pouvez essayer le code suivant dans JSfiddle:

Child One

const childOne = document.getElementById("child-one"); const childOneHandler = () => { console.log('Captured on child one') } const childOneHandlerCatch = () => { console.log('Captured on child one in capture phase') } childOne.addEventListener("click", childOneHandler); childOne.addEventListener("click", childOneHandlerCatch, true); 

Dans Firefox, Safari et Chrome, le résultat est le suivant:

Les événements en phase de capture sont déclenchés en premier

Comment écouter un événement

Il existe deux façons d'écouter un événement:

  1. addEventListener
  2. événements en ligne, tels que onclick
//addEventListener document.getElementByTag('a').addEventListener('click', onClickHandler); //inline using onclick Click me 

Quel est le meilleur - un événement en ligne ou addEventListener?

  1. addEventListener vous donne la possibilité d'enregistrer des gestionnaires d'événements illimités.
  2. removeEventListener peut également être utilisé pour supprimer des gestionnaires d'événements
  3. L' useCaptureindicateur peut être utilisé pour indiquer si un événement doit être traité dans la phase de capture ou dans la phase groupée.

Exemples de code et action en direct

Vous pouvez essayer ces événements dans JSFiddle pour jouer avec eux.

Child One

Child Two

const wrapperDiv = document.getElementById("wrapper-div"); const childOne = document.getElementById("child-one"); const childTwo = document.getElementById("child-two"); const childOneHandler = () => { console.log('Captured on child one') } const childTwoHandler = () => { console.log('Captured on child two') } const wrapperDivHandler = () => { console.log('Captured on wrapper div') } const childOneHandlerCatch = () => { console.log('Captured on child one in capture phase') } const childTwoHandlerCatch = () => { console.log('Captured on child two in capture phase') } const wrapperDivHandlerCatch = () => { console.log('Captured on wrapper div in capture phase') } childOne.addEventListener("click", childOneHandler); childTwo.addEventListener("click", childTwoHandler); wrapperDiv.addEventListener("click", wrapperDivHandler); childOne.addEventListener("click", childOneHandlerCatch, true); childTwo.addEventListener("click", childTwoHandlerCatch, true); wrapperDiv.addEventListener("click", wrapperDivHandlerCatch, true); 

TL; DR

Les phases d'événement sont la capture (DOM -> cible), la bulle (cible-> DOM) et la cible.

Les événements peuvent être écoutés en utilisant addEventListenerou des méthodes en ligne telles que onclick.

 addEventListener can add multiple events, whereas with onclick this cannot be done. onclick can be added as an HTML attribute, whereas an addEventListener can only be added within  elements. addEventListener can take a third argument which can stop the event propagation. 

Lire plus

//www.quirksmode.org/js/events_order.html

//jsfiddle.net/r2bc6axg/

//stackoverflow.com/questions/6348494/addeventlistener-vs-onclick

//www.w3.org/wiki/HTML/Attributes/_Global#Event-handler_Attributes

Pour suivre d'autres courts tutoriels comme celui-ci, inscrivez-vous à ma newsletter ou suivez-moi sur Twitter