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

يعد فقاعات الأحداث والتقاطها مرحلتين لكيفية نشر الأحداث (أو انتقالها) عبر DOM (نموذج كائن المستند) عند تشغيل حدث ما في JavaScript. الآن، يتطلب هذا البيان توضيح مفهوم انتشار الحدث.

نشر الحدث

عندما يقع حدث على عنصر، مثل زر داخل div، فإن الحدث لا يحدث عند هذا الزر فقط. ينتقل الحدث عبر DOM في عملية تُعرف باسم نشر الحدث. تتم هذه العملية على مرحلتين رئيسيتين:

• التقاط الأحداث (وتسمى أيضًا "التدفق")

• فقاعات الحدث

الآن، أتمنى أن تكون قد وصلتك الفكرة. دعونا نفهم كليهما مع الأمثلة.

حدث محتدما

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

  Parent Div
  Click Me!

مثال للشرح: عندما تنقر على الزر، يظهر "تم النقر على الزر!" يظهر التنبيه أولاً لأنه يتم تشغيل الحدث على الزر. بعد ذلك، "يقفز" الحدث إلى القسم الأصلي، وسترى "تم النقر على القسم الأصلي!" يُحذًِر. وذلك لأن الحدث يبدأ عند الزر ثم ينتقل إلى القسم الأصلي الخاص به. لذا، فإن عملية الانتشار هذه تسمى "حدث محتدما".

التقاط الحدث

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

  Parent Div
  Click Me!

في هذه الحالة، عند النقر فوق الزر، يظهر "تم النقر على القسم الأصلي!" سوف يظهر التنبيه أولا ثم تم النقر على الزر! سيظهر التنبيه لأن الحدث يبدأ من مستوى المستند، ويلتقط (يتقاطر) نزولاً إلى القسم الأصلي أولاً، ثم يصل إلى الزر.

القيمة الحقيقية للوسيطة الثالثة لـ addEventListener هي محدد مرحلة الالتقاط.

كل حدث يمر عبر 3 مراحل

بطبيعة الحال، يمر كل حدث بالمراحل الثلاث:

• مرحلة الالتقاط: يبدأ الحدث من الأعلى (المستند) وينتقل إلى الهدف.

• المرحلة المستهدفة: يصل الحدث إلى العنصر الذي تفاعلت معه (الهدف).

• مرحلة الفقاعات: بعد الوصول إلى الهدف، يعود الحدث احتياطيًا من خلال العناصر الأصلية.

لذلك نعم، يتحرك الحدث بشكل طبيعي عبر المراحل الثلاث، ولكن تمنحك JavaScript التحكم في المرحلة التي سيتصرف فيها مستمع الحدث.

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

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

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

ملخص:

• تمر جميع الأحداث بشكل طبيعي بمراحل الالتقاط والاستهداف والفقاعات.

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

• عندما تكون صحيحًا، فإنك تخبر مستمع الحدث بتشغيل أثناء مرحلة الالتقاط (أثناء انتقال الحدث للأسفل).

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