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

Hussein Aoda · 12 أبريل 2020

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

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

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

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

Mohammed Ahmed13 · 12 أبريل 2020

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

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

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

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

تحياتي لك.