Clever Geek Handbook

Eine einfache Erklärung der Ereignisdelegierung in JavaScript

Schöne Grüße. Ich präsentiere Ihnen die Übersetzung des Artikels "Eine einfache Erklärung der Ereignisdelegation in JavaScript" , der am 14. Juli 2020 vom Autor Dmitri Pavlutin veröffentlicht wurde





In diesem Artikel erklärt Dmitry Pavlutin, worauf eines der Grundmuster der Arbeit mit DOM-Ereignissen basiert.



1. Warum Eventdelegation?



Schreiben wir ein Skript, das beim Klicken auf eine HTML-Schaltfläche eine Nachricht an die Konsole sendet.



, 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 ( )


.



Die Ereignisdelegierung ist ein nützliches Muster, da Sie Ereignisse mit nur einem Handler über mehrere Elemente hinweg verfolgen können.



Damit die Ereignisdelegierung funktioniert, benötigen Sie drei Schritte:



  1. Definieren Sie das übergeordnete Element von Elementen, um Ereignisse zu verfolgen
  2. Fügen Sie einen Ereignishandler hinzu
  3. Verwenden Sie event.targetdiese Option, um das Zielelement auszuwählen


More articles:


All Articles