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

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

استخدام MonitorEvents()

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

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

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

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

unmonitorEvents($0)

unmonitorEvents($0)

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

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

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

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

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