احتدام الأحداث والتقاط الأحداث في JavaScript: كل ما تحتاج إلى معرفته

يعد Event Bubbling و Event Capturing من أكثر المصطلحات استخدامًا في JavaScript في وقت تدفق الحدث. هاتان هما طريقتان لنشر الحدث في HTML DOM API. ستشرح هذه المقالة حول الأحداث المتراكمة والتقاط الأحداث في JavaScript بالتفصيل سبب طلبنا لها بالتسلسل التالي:

• • • ما هو محتدما الحدث في جافا سكريبت؟
    • ما هو انتشار الحدث؟
    • ما هو تسجيل الحدث؟
    • استخدام فقاعات الأحداث والتقاط الأحداث في JavaScript
    • إجراءات العمل

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

Event Bubbling هو المصطلح الذي يجب أن يصادفه الأشخاص أثناء تطوير تطبيق ويب أو استخدام صفحة ويب . بشكل أساسي ، Event Bubbling هي تقنية يتم من خلالها استدعاء معالجات الأحداث عندما يكون عنصر واحد متداخلاً في عنصر آخر ويجب أن يكون من نفس الحدث. إنه مشابه للتغليف.

Event Bubbling هو جزء صغير من معالجة الأحداث في JavaScript. لفهمه بشكل أفضل ، يجب أن نعرف عن Event Propagation وكيف يدعم Event Bubbling.

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

يمكن مقارنة 'انتشار الحدث' على أنه المصطلح الأصلي مع ظهور فقاعات للحدث والتقاطه على أنه عنصر ثانوي.وهي ممثلة على النحو التالي:

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

يتم استدعاء كل من المستمعين مع كائن حدث يجمع معلومات حول الحدث على التوالي. هذا النشر مهم جدًا لأننا نعرف عملية استدعاء جميع المستمعين لحدث معين. من الصورة أعلاه يمكننا أن نلاحظ أن تحديد الفرع ثابت. يتم تجاهل أي تعديلات شجرة تحدث أثناء الحدث. هنا يكون التكاثر ثنائي الاتجاه أي أنه ينتقل من النافذة إلى هدف الحدث ويعود. هنا يتم تصنيف التكاثر على نطاق واسع إلى ثلاثة أنواع رئيسية. هؤلاء يكونون:

هياكل البيانات والخوارزميات في تعليمي جافا

1. مرحلة الالتقاط: الانتقال من النافذة إلى المرحلة المستهدفة للحدث.
2. المرحلة المستهدفة: إنها المرحلة المستهدفة.
3. مرحلة الفقاعة: من الحدث الأصل الهدف يعود إلى النافذة.

ما هو تسجيل الحدث؟

في هذه المرحلة ، يتم استدعاء المستمعين الملتقطين الذين تم تسجيل قيمتها على أنها 'حقيقية'. هو مكتوب على النحو التالي:

el.addEventListener ('انقر' ، مستمع ، صحيح)

هنا تم تسجيل قيمة المستمع لتكون 'true' لذلك يتم تسجيل هذا الحدث. إذا لم تكن هناك قيمة ، فستكون القيمة بشكل افتراضي خاطئة ولن يتم التقاط الحدث. لذلك في هذه المرحلة ، فإن الحدث الذي تكون قيمته صحيحة لا يجد طريقه إلا من النافذة ويتم استدعاؤه والتقاطه.

ثم في مرحلة هدف الحدث ، يتم استدعاء جميع المستمعين المسجلين بغض النظر عن حالة علمهم سواء كانت صحيحة أو خاطئة.

استخدام فقاعات الأحداث والتقاط الأحداث في JavaScript

في مرحلة الفقاعات ، يتم استدعاء الشخص غير الملتقط فقط ، أي الأحداث التي لها قيمة علامة على أنها 'خطأ'. تعد فقاعات الأحداث والتقاط الأحداث مفيدة ومهمة للغاية في مصطلحات DOM (نموذج كائن المستند).

el.addEventListener ('click'، listener، false) // المستمع لا يلتقط el.addEventListener ('click'، listener) // المستمع لا يلتقط

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

java تحويل المضاعفة إلى int

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

1. الهدف الإلكتروني: التي تشير إلى هدف الحدث.
2. ه.الهدف الحالي: إنه الوضع الذي يتم فيه تسجيل المستمعين الحاليين. هنا تتم الإشارة إلى القيمة باستخدام هذه كلمة رئيسية.
3. ه.مرحلة الحدث: وهو عدد صحيح يشير إلى ثلاث كلمات رئيسية أخرى مثل Capturing_phase ، Bubbling_phase ، AT_Target مرحلة.

إجراءات العمل

دعونا نلقي نظرة فاحصة في الرسم التوضيحي أعلاه. دعنا نضغط على عنصر 'buttonOne' وبعد ذلك على الفور سيتم تشغيل حدث. عادةً ما يبدأ الحدث رحلته من الجذر الذي يعد العنصر الأعلى في الشجرة. ثم يذهب بعد الشجرة الحدث الهدف 'buttonOne'. إليك كيف تنتقل:

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

كيفية استخدام اناكوندا بيثون

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

window.addEventListener ('click'، e => {e.stopPropagation ()}، true) window.addEventListener ('click'، listener ('c1')، true) window.addEventListener ('click' ، المستمع ('c2') ') ، صحيح) window.addEventListener (' click '، listener (' b1 ')) window.addEventListener (' click '، المستمع (' b2 '))

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

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

الآن بعد أن تعرفت على Event Bubbling و Event Capturing في JavaScript ، تحقق من ملف بواسطة Edureka. سيساعدك تدريب شهادة تطوير الويب على تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في 'محتدما الأحداث والتقاط الأحداث في جافا سكريبت' وسنعاود الاتصال بك.