اذهب إلى المحتوى
  • 0

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

Hussein Ouda

السؤال

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

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

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

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

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

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

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

تحياتي لك.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...