Clever Geek Handbook

شرح بسيط لتفويض الحدث في JavaScript

تحية طيبة. أقدم انتباهكم إلى ترجمة مقال "شرح بسيط لتفويض الحدث في جافا سكريبت" المنشور في 14 يوليو 2020 بواسطة دميتري بافلوتين





في هذه المقالة ، يشرح ديمتري بافلوتين ما يعتمد عليه أحد الأنماط الأساسية للعمل مع أحداث DOM.



1. لماذا تفويض الحدث؟



دعنا نكتب برنامجًا نصيًا ، عند النقر فوق زر HTML ، سيرسل رسالة إلى وحدة التحكم.



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


.



يعتبر تفويض الحدث نمطًا مفيدًا لأنه يسمح لك بتتبع الأحداث على عناصر متعددة باستخدام معالج واحد فقط.



لكي يعمل تفويض الحدث ، تحتاج إلى 3 خطوات:



  1. حدد أصل العناصر لتتبع الأحداث
  2. إرفاق معالج الحدث به
  3. استخدم event.targetلتحديد العنصر الهدف


More articles:


All Articles