ماهو الفرق بين  target  وcurrenttarget؟ javascript

target و currentTarget هما خاصيتين تُستخدمان عادة في أحداث الفأرة (mouse events) والأحداث المرتبطة بالعناصر الواجهة الرسومية في مواقع الويب. تُستخدم هاتين الخاصيتين للوصول إلى العنصر الذي تم تفعيل الحدث عليه. ومع ذلك، هناك فرق بينهما:

target

• هو العنصر الذي تم تفعيل الحدث عليه بالضبط.
• عندما يحدث حدث (مثل النقر بزر الفأرة) على عنصر ما، target سيُشير إلى هذا العنصر بغض النظر عن مكان انتشار الحدث.

currentTarget

• هو العنصر الذي تم ربط المعالج الحدثي به.
• عندما تقوم بإنشاء معالج حدث وتربطه بعنصر ما (عبر استخدام addEventListener مثلاً)، ثم تقوم بتنشيط الحدث على هذا العنصر أو أحد أبنائه، currentTarget سيشير إلى العنصر الذي تم ربط المعالج الحدثي به.

لفهم الفرق بينهما بشكل أفضل، هذا مثال بسيط:- 

<div id="parent">
  <button id="child">Click me!</button>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  parent.addEventListener('click', function(event) {
    console.log('Target:', event.target.id); // سيعرض "child"
    console.log('CurrentTarget:', event.currentTarget.id); // سيعرض "parent"
  });
</script>

في هذا المثال، عندما تقوم بنقر فوق زر "Click me!"، ستشير خاصية `event.target` إلى الزر نفسه (الذي يُعرف باسم "child")، بينما ستشير خاصية `event.currentTarget` إلى العنصر الذي تم ربط المعالج الحدثي به (الذي يُعرف باسم "parent").

شرح الفرق بين `target` و `currentTarget` بشكل أبسط:

• `target`: يشير إلى العنصر الفعلي الذي تم النقر عليه أو تنشيط الحدث عليه. يمكنك أن تعتبره "العنصر الهدف" الذي يتم التفاعل معه.

`currentTarget`: يشير إلى العنصر الذي تم تعيين الحدث عليه. يمكنك أن تعتبره "العنصر الحالي" الذي يتم تنفيذ الكود عليه.

لتوضيح ذلك، فلنفترض أن لديك قائمة (`<ul>`) ولديك عناصر (`<li>`) داخلها. عند النقر على عنصر (`<li>`)، يتم تنشيط الحدث.

• إذا استخدمت `target`، ستحصل على العنصر الدقيق الذي تم النقر عليه في القائمة (`<li>`).
• إذا استخدمت `currentTarget`، ستحصل على القائمة نفسها (`<ul>`)، العنصر الذي تم تعيين الحدث عليه.

باختصار، `target` يعيد العنصر الفعلي الذي تم التفاعل معه، بينما `currentTarget` يعيد العنصر الذي تم تعيين الحدث عليه (والذي يحتوي على العنصر الفعلي).

ولكن للتعمق أكثر في هذا الموضوع يجب عليك ويفضل الإطلاع على المصطلحات 

• عملية ال bubbling
• عملية ال propagation