Clever Geek Handbook

Penjelasan Sederhana Delegasi Acara di JavaScript

Salam pembuka. Untuk perhatian Anda saya sampaikan terjemahan dari artikel "Penjelasan Sederhana Delegasi Acara dalam JavaScript" yang diterbitkan pada 14 Juli 2020 oleh Dmitri Pavlutin





Dalam artikel ini, Dmitry Pavlutin menjelaskan apa yang menjadi dasar dari salah satu pola dasar bekerja dengan peristiwa DOM.



1. Mengapa acara delegasi?



Mari kita menulis skrip yang, ketika mengklik tombol HTML, akan mengirim pesan ke konsol.



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


.



Delegasi acara adalah pola yang berguna karena memungkinkan Anda melacak kejadian pada beberapa elemen hanya dengan satu penangan.



Agar delegasi acara berfungsi, Anda memerlukan 3 langkah:



  1. Tentukan induk elemen untuk melacak kejadian
  2. Lampirkan event handler padanya
  3. Gunakan event.targetuntuk memilih item target


More articles:


All Articles