انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: الأحداث الاصطناعية وانتشار الحدث والسلوك الافتراضي

target vs currentTarget Props الفرق بين target وcurrentTarget

أتقن التعامل مع كائن الحدث الاصطناعي الموحد SyntheticEvent في React، وميّز بين target وcurrentTarget، وتحكّم في صعود الأحداث وإيقاف انتشارها ومنع السلوك الافتراضي.
3 صفوف تعليمية
ReactJS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تتشابه خاصيتان مهمتان داخل كائن الحدث ظاهرياً لكن لكل منهما دلالة دقيقة يجب التمييز بينها:

  • الخاصية e.target: تشير إلى أعمق عنصر فرعي نقر عليه المؤشر فعلياً، مثل وسم <strong> أو شارة داخلية بداخل الزر.
  • الخاصية e.currentTarget: تشير دائماً إلى العنصر المحدد الذي يحمل خاصية المعالج مثل عنصر <button> الأب نفسه.

لذلك اعتمد دائماً على e.currentTarget عند قراءة سمات العنصر الحاضن للأيقونات والنصوص الفرعية.

الصف 2 كود برمجي
HTML 
function PlanButton({ onRead }) {
  function handlePick(e) {
    const hit = e.target.tagName;
    const owner = e.currentTarget.tagName;
    onRead(`target=${hit}, currentTarget=${owner}`);
  }
  return (
    <button type="button" onClick={handlePick}>
      <strong>Pro Plan</strong> <span>($19)</span>
    </button>
  );
}
جرّب بنفسك
الصف 3 معاينة حية

جميع فقرات هذا الدرس (الأحداث الاصطناعية وانتشار الحدث والسلوك الافتراضي)