Clever Geek Handbook

Une explication simple de la délégation d'événements en JavaScript

Salutations. Je présente à votre attention la traduction de l'article «Une simple explication de la délégation d'événement en JavaScript» , publié le 14 juillet 2020 par Dmitri Pavlutin





Dans cet article, Dmitry Pavlutin explique sur quoi repose l'un des modèles de base d'utilisation des événements DOM.



1. Pourquoi la délégation d'événements?



Écrivons un script qui, en cliquant sur un bouton HTML, enverra un message à la console.



, JavaScript addEventListener() .



<button id="buttonId">Click me</button>

<script>
  document.getElementById('buttonId')
    .addEventListener('click', () => console.log('Clicked!'));
</script>


. , .



, ? :



<div id="buttons">
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
  <!-- ... -->
  <button class="buttonClass">Click me</button>
</div>

<script>
  const buttons = document.getElementsByClassName('buttonClass');
  for (const button of buttons) {
    button.addEventListener('click', () => console.log('Clicked!'));
  }
</script>


, , CodeSandbox



, for (const button of buttons) , . , , .



?



, " ", .



" ". , , .



2.



HTML-:



<html>
  <body>
    <div id="buttons">
      <button class="buttonClass">Click me</button>
    </div>
  </body>
</html>


click? , . , , ( document window).



3 :



  1. / (capturing phase) – window, document , DOM- ,
  2. (target phase) – ,
  3. (bubble phase) – , , , document window




captureOrOptions addEventListener:



element.addEventListener(eventType, handler[, captureOrOptions]);


.



  • captureOrOptions , false `{ capture: false }, " " " "
  • captureOrOptions true `{ capture: true }, " ()"


<body> " ":



document.body.addEventListener('click', () => {
  console.log('Body click event in capture phase');
}, true);


CodeSandbox, , , .



, ?



: , , . .



3.



, :



<div id="buttons"> <!--  1 -->
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
  <!-- ... -->
  <button class="buttonClass">Click me</button>
</div>

<script>
  document.getElementById('buttons')
    .addEventListener('click', event => { // Step 2
      if (event.target.className === 'buttonClass') { // Step 3
        console.log('Click!');
      }
    });
</script>


– "Click!".



. , <div id="buttons">. , , ( ?).



3 :



1.

<div id="buttons"> .



2.

document.getElementById('buttons').addEventListener('click', handler) . , - ( ).



3. event.target

, - : event. event.target , ( – ):



  // ...
  .addEventListener('click', event => {
    if (event.target.className === 'buttonClass') {
      console.log('Click!');
    }
  });


, , event.currentTarget. event.currentTarget <div id="buttons">.



: , , , .



4.



( ):



  • window, document, ( / )
  • ( )
  • , , , , document window ( )


.



La délégation d'événements est un modèle utile car elle vous permet de suivre les événements sur plusieurs éléments avec un seul gestionnaire.



Pour que la délégation d'événements fonctionne, vous avez besoin de 3 étapes:



  1. Définir le parent des éléments pour suivre les événements
  2. Attachez-lui un gestionnaire d'événements
  3. Utilisez event.targetpour sélectionner l'élément cible


More articles:


All Articles