• 0

ترتيب تنفيذ مستمعات العناصر المتداخلة في DOM

بالتأمل في العقد وكيفية هيكلة DOM، وبعد تتنفيذ الكود أدناه، أي مستمع أحداث سيُطلق أولاً عند نقر الصفحة؟

وما هو تفسير سبب وقوعها بذلك الترتيب؟

document.addEventListener('click', function () {
   console.log('The document was clicked');
});

document.body.addEventListener('click', function () {
    console.log('The document body was clicked');
});

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

مرحباً بك @Hussein Aoda.

يتم تنفيذ المستمع الخاص بالعنصر المعني الذي تم النقر عليه أولاً ومن ثم العنصر الذي يحتوي عليه بغض النظر عن ترتيبهم في الكود.

أي أنه إذا كان لديك مثلاً button بداخل الـ body والذي هو بدوره جزء من الـ document، وقمت بتسجيل مستمع لكل واحد منهم، فإنه عند النقر المستمع الخاص بالزر سوف يتم تنفيذه أولا ومن ثم المستمع الخاص بالـ body وأخيراً المستمع الخاص بالـ document.

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

تحياتي لك.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

شكرا كثيرا يا باش مهندس على الأفادة الرائعة 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن