فهم انتشار الأحداث في جافا سكريبت

انقر فوق لي






instagram viewer

يحتوي الكود أعلاه على عنصر زر به زر معرّف مسمى. يحتوي على مستمع حدث النقر الذي يعرض تنبيهًا بالرسالة مرحبا بالعالم.

ما هو انتشار الحدث؟

يصف نشر الحدث الترتيب الذي تنتقل به الأحداث عبر شجرة DOM عندما يقوم متصفح الويب بتشغيلها.

افترض أن هناك علامة نموذج داخل علامة div ، وكلاهما لهما مستمعون لحدث onclick. يصف Event Propagation كيف قد يطلق مستمع حدث واحد تلو الآخر.

هناك نوعان من التكاثر:

1. حدث فقاعات ، تتدفق من خلالها الأحداث لأعلى ، من طفل إلى آخر.
2. التقاط الأحداث ، والتي تنتقل من خلالها الأحداث إلى أسفل ، من الوالدين إلى الطفل.

ما هو محتدما الحدث في جافا سكريبت؟

تعني فقاعة الحدث أن اتجاه انتشار الحدث سيكون من العنصر الفرعي إلى العنصر الأصل.

تأمل المثال التالي. يحتوي على ثلاثة عناصر متداخلة: div والنموذج والزر. كل عنصر له انقر مستمع الحدث. يعرض المتصفح ملف إنذار برسالة عند النقر فوق كل عنصر.

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

 شعبة


 شكل 



 زر

ما هو حدث التقاط؟

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

لتحقيق التقاط الحدث ، تحتاج إلى إجراء تغيير واحد فقط على الكود. المعلمة الثانية من addEventListener () يحدد نوع التكاثر. من الخطأ افتراضيًا تمثيل الفقاعات. لتمكين التقاط الحدث ، تحتاج إلى ضبط المعلمة الثانية على "صواب".

 div.addEventListener ("انقر" ، () => {
 تنبيه ("div")
 }, صحيح);
 form.addEventListener ("انقر" ، () => {
 تنبيه ("شكل")
 }, صحيح);
 button.addEventListener ("انقر" ، () => {
 تنبيه ("زر")
 }, صحيح);

كيف يمكنك منع انتشار الحدث؟

يمكنك إيقاف انتشار الأحداث باستخدام stopPropagation () طريقة. ال addEventListener () يقبل الأسلوب اسم حدث ووظيفة معالج. المعالج يأخذ كائن حدث كمعلمة. هذا الكائن يحمل جميع المعلومات حول الحدث.

عندما تستدعي ملف stopPropagation () ، فإن الحدث سيتوقف عن التكاثر من تلك النقطة. على سبيل المثال ، عند استخدام ملفات stopPropagation () في عنصر النموذج ، ستتوقف الأحداث عن الظهور حتى عنصر div. إذا قمت بالنقر فوق الزر ، فسترى الأحداث مرفوعة على الزر والنموذج ، ولكن ليس على div.

form.addEventListener ("انقر" ، (هـ) => {
ه.وقف الانتشار () ؛
 تنبيه ("شكل") ؛
});

متعلق ب: ورقة الغش في نهاية المطاف جافا سكريبت

جافا سكريبت لديها الكثير من القوة تحت الغطاء

تعتبر معالجة الأحداث في JavaScript قوية ، ويمكن مقارنتها بالعديد من لغات الواجهة الكاملة. عندما تقوم بتطوير تطبيقات ويب تفاعلية ، فهي جزء حيوي من مجموعة الأدوات الخاصة بك. ولكن هناك العديد من الموضوعات المتقدمة الأخرى التي يجب فهمها. لمطوري JavaScript المحترفين ، هناك الكثير لنتعلمه!

إذا كنت ترغب في تعلم برمجة JavaScript مثل المحترفين ، فراجع دليلنا إلى الخطوط الذكية الذكية واستعد للإبهار في مقابلتك التالية.

أوناتي بامانيا (تم نشر 12 مقالة)

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

المزيد من Unnati Bamania