انتقل إلى محتوى الدرس

React SyntheticEvent Wrapper كائن الحدث الاصطناعي الموحد

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

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

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

تمرر مكتبة React تلقائياً معامل حدث وحيداً يُسمى عرفاً e أو event إلى كل دالة معالجة، وهو كائن الحدث الاصطناعي الموحد (SyntheticEvent). يغلف هذا الكائن حدث المتصفح الأصلي ليوحد جميع الخصائص والدوال القياسية مثل e.type وe.key وe.clientX عبر مختلف المتصفحات والأجهزة دون تناقضات.

وإذا احتجت في حالات خاصة نادرة إلى كائن الحدث الخام التابع للمتصفح مباشرةً، يمكنك قراءته عبر الخاصية e.nativeEvent.

الصف 2 كود برمجي
HTML
function KeyAndClickProbe({ onInspect }) {
  function handleClick(e) {
    onInspect(`type=${e.type}, button=${e.button}`);
  }
  return (
    <button type="button" onClick={handleClick}>
      Inspect SyntheticEvent
    </button>
  );
}
الصف 3 ملاحظة هامة