تحقق مما إذا كان event.target به فئة معينة باستخدام JavaScript

صمم العناصر باستخدام نمط CSS. للقيام بذلك ، أنشئ فئة CSS ' .div 'لجميع عناصر div:

إنشاء ' .المركز فئة 'لتعيين العناصر في وسط الصفحة:

الآن ، بالنسبة إلى التصميم ، يقوم كل div على حدة بإنشاء فئة CSS لهم. بالنسبة إلى div الأول ، عيّن لون الخلفية ' أحمر ' في ال ' div1 نمط ' صف دراسي:

بالنسبة إلى div الثاني ، اضبط لون الخلفية ' الفجل الوردي ' باستخدام ' rgba (194 ، 54 ، 77) 'في' div2Style ' صف دراسي:

اضبط لون الخلفية ' زهري 'من div الثالث بإنشاء' div3Style ' صف دراسي:

بعد تشغيل كود HTML أعلاه ، سيبدو الإخراج كما يلي:

الآن ، في ملف JavaScript أو ' النصي '، استخدم الكود أدناه للتحقق مما إذا كان event.target به فئة معينة أم لا:

في مقتطف الشفرة أعلاه:

• أولاً ، قم بإرفاق مستمع الحدث بحدث النقر الذي سيتعامل مع كل نقرة على DOM.
• بعد ذلك ، تحقق مما إذا كان الحدث الذي تم تشغيله يحتوي على فئة CSS ' المركز 'أو لا بمساعدة' classList.class () ' طريقة.

انتاج |

يوضح ملف GIF أعلاه أن div1 يحتوي على ' المركز 'الطبقة كما تظهر' حقيقي '، بينما تعرض div2 و div3' خاطئة 'في مربع التنبيه ، مما يعني أنها لا تحتوي على' المركز ' صف دراسي.

الطريقة 2: تحقق مما إذا كان event.target به فئة محددة باستخدام أسلوب المطابقات ()

طريقة JavaScript أخرى محددة مسبقًا تسمى ' اعواد الكبريت() 'للتحقق مما إذا كانت فئة معينة تنتمي إلى عنصر أو حدث. ال ' اسم الطبقة 'هي المعلمة الوحيدة اللازمة لتحديد ما إذا كان عنصر أو حدث هدف يتضمن فئة معينة أم لا.

بناء الجملة

يتم استخدام الصيغة الموضحة أدناه لطريقة () المطابقات:

في النحو أعلاه ،

• ' event.target 'هو حدث تم تشغيله وسيتم التحقق مما إذا كان يحتوي على فئة معينة أم لا.
• ال ' اسم الطبقة 'يشير إلى اسم فئة CSS التي تعد جزءًا من الحدث الذي تم تشغيله. تأخذ طريقة match () اسم الفصل مع نقطة (.) التي تشير إلى الكلمة ' صف دراسي '.

قيمة الإرجاع

إذا كان للحدث الهدف فئة ، فإنه يعرض ' حقيقي ' آخر، ' خاطئة ' يتم إرجاع.

مثال

في ملف JavaScript أو علامة البرنامج النصي ، استخدم أسطر التعليمات البرمجية أدناه للتحقق مما إذا كان event.target به فئة معينة أم لا باستخدام ' اعواد الكبريت() ' طريقة:

في سطور التعليمات البرمجية أعلاه:

• أولاً ، قم بإرفاق مستمع الحدث بحدث النقر الذي سيتعامل مع كل نقرة على DOM.
• بعد ذلك ، تحقق مما إذا كانت ' div3Style 'فئة CSS موجودة في حدث تم تشغيله باستخدام' اعواد الكبريت() ' طريقة.
• إذا كان موجودًا ، يعرض التنبيه () رسالة تحتوي على ' حقيقي '، آخر ' خاطئة '.

انتاج |

يوضح ملف GIF أعلاه أن div3 فقط يحتوي على ' div3Style 'الطبقة كما تظهر' حقيقي '.

استنتاج

لتحديد ما إذا كان حدث تم تشغيله له فئة محددة ، استخدم JavaScript ' يحتوي على() 'أو' اعواد الكبريت() ' طريقة. ومع ذلك ، فإن طريقة contains () هي واحدة من أكثر الأساليب المفيدة المستخدمة لتحديد فئة العنصر. كلا الطريقتين ترجع ' حقيقي 'إذا كان الحدث الذي تم تشغيله يحتوي على فئة أخرى' خاطئة ' يتم إرجاع. أوضح هذا المنشور طرق تحديد ما إذا كان event.target به فئة معينة أم لا يستخدم JavaScript.