Clever Geek Handbook

Uma explicaĆ§Ć£o simples de delegaĆ§Ć£o de eventos em JavaScript

SaudaƧƵes. Apresento a sua atenĆ§Ć£o a traduĆ§Ć£o do artigo "Uma explicaĆ§Ć£o simples da delegaĆ§Ć£o de eventos em JavaScript" publicado em 14 de julho de 2020 por Dmitri Pavlutin





Neste artigo, Dmitry Pavlutin explica em que se baseia um dos padrƵes bƔsicos de trabalho com eventos DOM.



1. Por que delegar eventos?



Vamos escrever um script que, ao clicar em um botĆ£o HTML, enviarĆ” uma mensagem para o 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 ( )


.



A delegaĆ§Ć£o de eventos Ć© um padrĆ£o Ćŗtil porque permite rastrear eventos em vĆ”rios elementos com apenas um manipulador.



Para a delegaĆ§Ć£o de eventos funcionar, vocĆŖ precisa de 3 etapas:



  1. Defina o pai dos elementos para rastrear eventos
  2. Anexe um manipulador de eventos a ele
  3. Use event.targetpara selecionar o item alvo


More articles:


All Articles