Event Bubbling and Capturing

المفاهيم الأساسية:

• نموذجي حدث الفقاعات (Event Bubbling): يرتفع الحدث لأعلى في شجرة DOM حتى يصل إلى عنصر الجد الأعلى.
• نموذجي حدث التقاط الأحداث (Event Capturing): ينتشر الحدث لأسفل في شجرة DOM من الجد الأعلى إلى العنصر المستهدف.
• إيقاف نشر الحدث (stopPropagation): يوقف انتشار الحدث إلى الأعلى أو الأسفل في شجرة DOM.
• انتشار الحدث (Event Propagation): انتشار الحدث عبر شجرة DOM.

الخطوات العملية:

الاستماع للأحداث

1. قم بتعيين مستمع الحدث لعنصر في شجرة DOM.
2. استخدم دالة الاستدعاء "Event" التي يتم تشغيلها عند حدوث الحدث.

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

1. استخدم "stopPropagation" في دالة الاستدعاء "Event" لإيقاف انتشار الحدث.
2. سيؤدي هذا إلى إيقاف الحدث عن الانتشار لأعلى أو لأسفل في شجرة DOM.

مثال جافا سكريبت

// إضافة مستمع حدث الفقاعات إلى العنصر المستهدف
targetElement.addEventListener("click", function(e) {
  console.log("حدث الفقاعات في العنصر المستهدف");
});

// إضافة مستمع حدث التقاط الأحداث إلى العنصر الجد الأعلى
parentElement.addEventListener("click", function(e) {
  e.stopPropagation(); // إيقاف انتشار الحدث
  console.log("حدث التقاط الأحداث في العنصر الجد الأعلى");
});

ما هو نموذجي حدث الفقاعات والتقاط الأحداث؟

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

• نموذجي حدث الفقاعات: مثل الفقاعات التي ترتفع إلى أعلى، تنتشر الأحداث في شجرة DOM من الورقة (العنصر المستهدف) إلى الفروع (العناصر الجد الأعلى).
• نموذجي حدث التقاط الأحداث: مثل قطرات المطر التي تتساقط من الفروع، تنتشر الأحداث في شجرة DOM من الفروع (العناصر الجد الأعلى) إلى الورقة (العنصر المستهدف).

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

يمكننا إيقاف انتشار الحدث باستخدام "stopPropagation" مثل إغلاق الصنبور لإيقاف تدفق الماء. هذا مفيد لمنع حدوث حالات غير مرغوب فيها، على سبيل المثال:

• منع النقر المزدوج على العنصر من تشغيل حدثين منفصلين.
• منع الأحداث من الانتشار إلى عناصر غير ذات صلة.

مثال جافا سكريبت مبسط:

// إضافة مستمع حدث الفقاعات إلى الورقة
paper.addEventListener("click", function() {
  console.log("حدث الفقاعات في الورقة");
});

// إضافة مستمع حدث التقاط الأحداث إلى الفرع
branch.addEventListener("click", function(e) {
  e.stopPropagation(); // إيقاف انتشار الحدث
  console.log("حدث التقاط الأحداث في الفرع");
});

باستخدام هذه المفاهيم، يمكنك التحكم جيدًا في كيفية انتشار الأحداث عبر شجرة DOM وتوفير تجربة مستخدم محسّنة.