في هذا الدرس 6تصفّح المواضيع
تمرر مكتبة React تلقائياً معامل حدث وحيداً يُسمى عرفاً e أو event إلى كل دالة معالجة، وهو كائن الحدث الاصطناعي الموحد (SyntheticEvent). يغلف هذا الكائن حدث المتصفح الأصلي ليوحد جميع الخصائص والدوال القياسية مثل e.type وe.key وe.clientX عبر مختلف المتصفحات والأجهزة دون تناقضات.
وإذا احتجت في حالات خاصة نادرة إلى كائن الحدث الخام التابع للمتصفح مباشرةً، يمكنك قراءته عبر الخاصية e.nativeEvent.
function KeyAndClickProbe({ onInspect }) {
function handleClick(e) {
onInspect(`type=${e.type}, button=${e.button}`);
}
return (
<button type="button" onClick={handleClick}>
Inspect SyntheticEvent
</button>
);
}تتشابه خاصيتان مهمتان داخل كائن الحدث ظاهرياً لكن لكل منهما دلالة دقيقة يجب التمييز بينها:
- الخاصية
e.target: تشير إلى أعمق عنصر فرعي نقر عليه المؤشر فعلياً، مثل وسم<strong>أو شارة داخلية بداخل الزر. - الخاصية
e.currentTarget: تشير دائماً إلى العنصر المحدد الذي يحمل خاصية المعالج مثل عنصر<button>الأب نفسه.
لذلك اعتمد دائماً على e.currentTarget عند قراءة سمات العنصر الحاضن للأيقونات والنصوص الفرعية.
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>
);
}تصعد جميع الأحداث تقريباً في React—باستثناء أحداث التمرير مثل onScroll—من الأسفل إلى الأعلى (Bubbling) عبر شجرة المكونات. فإذا وضعت زر «حفظ بالمفضلة» داخل بطاقة درس قابلة للنقر يحمل كلاهما خاصية onClick، فإن النقر على الزر سيشغّل معالج الزر أولاً ثم يصعد فوراً ليشغّل معالج البطاقة الأب ثانياً.
لمنع نقرة زر فرعي من تشغيل حدث البطاقة الأب أو خلفية النافذة المنبثقة عن طريق الخطأ، استدعِ الدالة e.stopPropagation() في بداية معالج العنصر الابن؛ وبذلك يتوقف صعود الحدث عند هذا المستوى مع إتمام مهمة الزر الفرعي بنجاح.
function CourseCard({ onLog }) {
const stopAndSave = (e) => {
e.stopPropagation();
onLog('Bookmarked only!');
};
return (
<div onClick={() => onLog('Opened Card')}>
<h4>Modern React State</h4>
<button onClick={stopAndSave}>Bookmark</button>
</div>
);
}في حالات معمارية خاصة مثل تسجيل النقرات التحليلية أو تتبع التركيز حتى لو أوقف زر فرعي صعود الحدث بدالة e.stopPropagation()، يمكنك إضافة اللاحقة Capture لأي خاصية حدث مثل onClickCapture لتعمل تنازلياً من الأب نحو الابن قبل مرحلة الصعود.
تمتلك بعض عناصر المتصفح سلوكاً تلقائياً مدمجاً؛ فإرسال عنصر <form> يعيد تحميل الصفحة كاملةً. وهنا نستدعي الدالة e.preventDefault() لإلغاء السلوك الافتراضي للمتصفح مع بقاء التطبيق حياً وسريعاً. احذر دائماً من الخلط بين إيقاف الانتشار ومنع السلوك الافتراضي كما يوضح الجدول المقارن التالي:
| الدالة أو الخاصية | الوظيفة الهندسية الدقيقة | حالة الاستخدام العملية في React |
|---|---|---|
e.target | أعمق عنصر فرعي نقر عليه المستخدم فعلياً | معرفة العنصر الداخلي المحدد الذي استقبل الضغطة |
e.currentTarget | العنصر الحامل لدالة المعالجة الحالية في JSX | قراءة بيانات عنصر زر يضم أيقونة ونصاً بداخله |
e.stopPropagation() | إيقاف صعود الحدث إلى معالجات المكونات الأب | عزل زر الحفظ أو الحذف داخل بطاقة قابلة للنقر |
e.preventDefault() | إلغاء السلوك الافتراضي المدمج في المتصفح | منع إعادة تحميل الصفحة عند إرسال نماذج <form> |
function NewsletterForm({ onSubmitted }) {
function handleSubmit(e) {
e.preventDefault();
onSubmitted('Subscribed without page reload!');
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Subscribe</button>
</form>
);
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
استكشفت في هذا الدرس كائن الحدث الاصطناعي الموحد SyntheticEvent، وفرقت عملياً بين target وcurrentTarget، وتتبعت مرحلتي الالتقاط والصعود عبر شجرة المكونات مع عزل النقرات الفرعية بـ stopPropagation ومنع تحديث الصفحة بـ preventDefault. الخطوة التالية: انتقل الآن إلى الدرس رقم 18 «ذاكرة المكون عبر useState وقواعد الخطافات» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 SyntheticEvent الحدث الاصطناعي الموحد
- غلاف موحد توفره React حول حدث المتصفح الأصلي لضمان تطابق الخصائص والدوال عبر كافة المتصفحات.
- للمراجعة
- 02 Event Bubbling صعود الحدث
- انتقال الحدث تصاعدياً من العنصر الفرعي المنقور إلى معالجات العناصر الأب والأسلاف في شجرة الواجهة.
- للمراجعة
- 03 Capture Phase مرحلة الالتقاط التنازلي
- المرحلة الأولى التي ينزل فيها الحدث من الجذر نحو العنصر الهدف وتُلتقط في React باللاحقة Capture.
- للمراجعة
- 04 Default Browser Action السلوك الافتراضي للمتصفح
- الإجراء التلقائي المدمج بالمتصفح مثل إعادة تحميل الصفحة عند إرسال نموذج والذي نلغيه بدالة preventDefault.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 W3C W3C
- World Wide Web Consortium
- منظمة معايير الويب العالمية التي يلتزم كائن SyntheticEvent في React بمواصفات الأحداث القياسية الصادرة عنها.
- للمراجعة
- 02 SPA SPA
- Single-Page Application
- معمارية تطبيقات تعتمد على منع إعادة تحميل الصفحة الكاملة لمعالجة النماذج والانتقالات بسلاسة.
- للمراجعة
- 03 DOM DOM
- Document Object Model
- شجرة عناصر المستند الحية التي يمكن قراءة حدثها الأصلي المباشر عبر خاصية e.nativeEvent.
- للمراجعة
- 04 API API
- Application Programming Interface
- واجهة الدوال والخصائص القياسية المتاحة على كائن الحدث للتحكم الدقيق في مساره وسلوكه.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال انتشار الأحداث في محرر التجريب، وانقر كلا الزرين للتحقق من أن e.stopPropagation() يمنع ظهور خطوة البطاقة الأب.
-
افتح مثال نموذج البحث في محرر التجريب، واكتب كلمة مفتاحية ثم اضغط Enter ولاحظ بقاء الواجهة دون إعادة تحميل.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
ما الدالة التي تمنع نقرة زر فرعي من تشغيل معالج onClick الخاص بالبطاقة الأب الحاضنة له؟
توقف دالة e.stopPropagation() صعود الحدث إلى معالجات العناصر الأب في الشجرة.
ما الدالة التي تمنع المتصفح من إعادة تحميل الصفحة بالكامل عند إرسال عنصر <form>؟
تلغي الدالة e.preventDefault() السلوك الافتراضي للمتصفح المتمثل في إعادة تحميل الصفحة.
إذا احتوى عنصر <button onClick={handleClick}> على وسم داخلي <strong>حفظ</strong> ونقر المستخدم فوق النص العريض، فما قيمة e.currentTarget؟
تشير e.currentTarget دائماً للعنصر الحامل للمعالج وهو <button>، بينما تشير e.target إلى العنصر الفرعي <strong>.
في React تصعد معظم أحداث الواجهة عبر شجرة المكونات نحو الأعلى، ويُعد الحدث onScroll استثناءً بارزاً لا يصعد للأب.
صواب؛ فأحداث النقر ولوحة المفاتيح تصعد للأب بينما يقتصر onScroll على العنصر المتمرر ذاته.
كيف تربط مستمع نقر في React يعمل خلال مرحلة الالتقاط التنازلي Capture قبل وصول الحدث للأبناء؟
إضافة اللاحقة Capture لاسم الخاصية مثل onClickCapture يجعلها تعمل في مرحلة النزول.
ما الخاصية الموجودة داخل كائن SyntheticEvent للوصول إلى حدث المتصفح الأصلي الخام عند الضرورة؟
توفر خاصية e.nativeEvent الوصول المباشر لكائن الحدث الأصلي التابع للمتصفح.
استدعاء الدالة e.preventDefault() يوقف صعود الحدث إلى المكونات الأب تلقائياً أيضاً.
خطأ؛ فدالة preventDefault تلغي السلوك الافتراضي للمتصفح فقط ولا توقف انتشار الحدث صعوداً.
في React 18 الحديثة، تُفوض الأحداث مركزياً على حاوية الجذر التي أنشأتها createRoot بدلاً من تعليق مستمع منفصل لكل عنصر.
صواب؛ فالتفويض المركزي على حاوية الجذر يحسن استهلاك الذاكرة ويوحد سلوك الشجرة.
ما الترتيب الزمني الصحيح لمراحل تنفيذ الحدث عند النقر على زر فرعي داخل حاوية أب؟
تعمل معالجات الالتقاط Capture نزولاً أولاً، ثم معالج الهدف، ثم معالجات الصعود Bubbling نحو الأعلى.
لماذا تغلف مكتبة React أحداث المتصفح الأصلية داخل كائن SyntheticEvent؟
لتوحيد خصائص وسلوك الأحداث قياسياً عبر كافة المتصفحات وأنظمة التشغيل المختلفة.