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

Event Bubbling in React Tree صعود الأحداث بشجرة المكونات

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

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

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

تصعد جميع الأحداث تقريباً في React—باستثناء أحداث التمرير مثل onScroll—من الأسفل إلى الأعلى (Bubbling) عبر شجرة المكونات. فإذا وضعت زر «حفظ بالمفضلة» داخل بطاقة درس قابلة للنقر يحمل كلاهما خاصية onClick، فإن النقر على الزر سيشغّل معالج الزر أولاً ثم يصعد فوراً ليشغّل معالج البطاقة الأب ثانياً.

الصف 2 صورة توضيحية
المراحل الثلاث لانتشار الحدث في React: الالتقاط التنازلي ثم تنفيذ الهدف ثم الصعود للأب أو إيقافه بدالة stopPropagation
الصف 3 ملاحظة هامة

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