فهم الأحداث التي يتم تشغيلها بواسطة تفاعلات العناصر

لتحديد الأحداث والتعامل معها بشكل مناسب على عنصر نموذج قابل للتخصيص، من الضروري فهم الأحداث المحددة التي يتم إطلاقها عند التفاعل. توفر Chrome DevTools أداة قوية، وهي MonitorEvents، للمساعدة في هذه العملية.

استخدام MonitorEvents()

1. فحص العنصر المستهدف: انقر بزر الماوس الأيمن على العنصر وحدد "فحص" أو حدد موقعه في علامة التبويب "العناصر" في DevTools.
2. افتح وحدة التحكم علامة التبويب: قم بالتبديل إلى علامة التبويب "وحدة التحكم".
3. استدعاء MonitorEvents: اكتب MonitorEvents($0) في وحدة التحكم، حيث يمثل $0 العنصر المحدد.

عندما تتفاعل مع العنصر (على سبيل المثال، التمرير والنقر)، ستعرض وحدة التحكم أسماء الأحداث التي تم إطلاقها مع ما يقابلها data.

إيقاف مراقبة الأحداث

لإيقاف مراقبة الأحداث، أدخل الأمر التالي في وحدة التحكم:

unmonitorEvents($0)

تصفية الأحداث المراقبة ( اختياري)

تتيح لك وظيفة MonitorEvents تضييق نطاق الأحداث المراقبة عن طريق تحديد نوع كمعلمة ثانية. على سبيل المثال، ستسجل MonitorEvents(document.body, 'mouse') الأحداث المتعلقة بالماوس فقط.

تتضمن أنواع الأحداث المتاحة اعتبارًا من 30-01-2023 ما يلي:

• mouse
• مفتاح
• اللمس
• التحكم

تتيح ميزة MonitorEvents للمطورين مراقبة الأحداث واستكشاف الأخطاء وإصلاحها بسهولة لعناصر النموذج المخصصة، مما يسهل التفاعل الفعال وتجربة المستخدم على الويب.