فقاعات الأحداث والتقاطها: فهم الانتشار في DOM

تلعب فقاعات الأحداث والتقاطها أدوارًا حاسمة في نشر الأحداث داخل HTML DOM API. لفهم وظائفها، دعونا نتعمق في تعقيدات هذين المفهومين.

فقاعة الأحداث مقابل التقاط الأحداث

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

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

التقاطر مقابل الفقاعاتيُعرف الالتقاط أيضًا باسم "التقاطر"، وهو مصطلح يساعد على تذكر ترتيب الانتشار: "تقاطر لأسفل، فقاعة up."

دعم المتصفح

قدم Netscape ميزة التقاط الأحداث، بينما دعمت Microsoft الحدث.

• معيار W3C Document Object Model Events (2000) يتضمن كليهما.
• يستخدم IE

اعتبارات الأداء

قد يكون أداء الأحداث الفقاعية أقل قليلاً في DOMs المعقدة مقارنة بـ التقاط الأحداث.

الاستخدام

نحن نستخدم طريقة addEventListener(type,lister,useCapture) لتسجيل معالجات الأحداث إما في وضع الفقاعات (الافتراضي) أو وضع الالتقاط. لاستخدام نموذج الالتقاط، يجب تعيين الوسيطة الثالثة على true.

مثال

ضع في اعتبارك بنية HTML التالية:

في وضع الالتقاط، تتم معالجة الحدث أولاً بواسطة div، متبوعًا بـ ul، وأخيرًا li.

في وضع الفقاعات، يتم التعامل مع الحدث أولاً بواسطة li، ثم بواسطة ul، وأخيرًا بواسطة div.
موارد إضافية

[ترتيب الحدث على QuirksMode](https://www.quirksmode.org/js/events_order.html )

[addEventListener قيد التشغيل MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)

• [الأحداث المتقدمة في QuirksMode](https://www.quirksmode.org/ js/events/)
• تفاعلية العرض التوضيحي

يوضح المثال التفاعلي التالي مراحل الالتقاط والفقاعات لنشر الحدث:var logElement = document.getElementById('log'); سجل الوظيفة (رسالة) { logElement.innerHTML = ('

' msg '

'); } التقاط الوظيفة () { log('capture:' this.firstChild.nodeValue.trim()); } فقاعة الوظيفة () { log('فقاعة:' this.firstChild.nodeValue.trim()); } var divs = document.getElementsByTagName('div'); لـ (var i = 0; i

عند النقر على أي من العناصر المميزة، لاحظ مرحلة التقاط الحدث التي تحدث أولاً، تليها مرحلة الفقاعات.