jQuery Academy · درس

تطبيق تفويض الأحداث المتين

تعلّم مبادئ تفويض الأحداث وفوائده باستخدام .on() لمعالجة أحداث عناصر متعددة وحالية ومستقبلية بواسطة مستمع واحد، مما يحسّن الأداء.

تطبيق تفويض الأحداث المتين درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.

ما تفويض الأحداث؟

مرحبًا بك في تفويض الأحداث! تساعدك هذه التقنية القوية على إدارة الأحداث بكفاءة في تطبيقات الويب.

بدلًا من إرفاق العديد من مستمعي الأحداث بالعناصر الفردية، تُرفق مستمعًا واحدًا بعنصر أب مشترك. يشبه ذلك وجود «مشرف» واحد يراقب جميع «أبنائه» بحثًا عن إجراءات محددة.

الربط المباشر: أحد القيود

عند ربط الأحداث مباشرةً بالعناصر باستخدام .on() أو طرق أخرى، يُرفق المستمع بالعناصر الموجودة في تلك اللحظة تحديدًا فقط. وأي عناصر جديدة تُضاف إلى DOM لاحقًا لن تحصل تلقائيًا على معالج الأحداث.

في المثال، جرّب النقر على الأزرار الأولية. ثم يظهر زر جديد بعد تأخير قصير. جرّب النقر على الزر الجديد؛ فلن يستجيب!

$(document).ready(function() {
  // Assume basic HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Direct binding to existing items
  $('.item').on('click', function() {
    $(this).text('Directly clicked!');
  });

  // Simulate adding a new item after initial binding
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it wont respond!');
  }, 2000);
});

فهم انتشار الأحداث

لفهم التفويض، تحتاج إلى معرفة انتشار الأحداث. عندما يقع حدث (مثل النقر) على عنصر ما، فإنه يُفعَّل أولًا على ذلك العنصر، ثم على العنصر الأب، ثم على أبيه، ويستمر هكذا حتى يصل إلى document.

تشير الخاصية event.target دائمًا إلى العنصر الأصلي الذي فعّل الحدث، بغض النظر عن العنصر الأب الذي يلتقطه. جرّب النقر على العناصر أدناه وراقب ناتج وحدة التحكم.

$(document).ready(function() {
  // Assume HTML like:
  // <div id="outer">
  //   <div id="middle">
  //     <button id="inner">Click Me</button>
  //   </div>
  // </div>

  $('#outer').on('click', function(event) {
    console.log('Outer div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#middle').on('click', function(event) {
    console.log('Middle div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#inner').on('click', function(event) {
    console.log('Inner button caught event. Target:', event.target.id || event.target.tagName);
  });
});

استخدام .on() في jQuery للتفويض

يمكن استخدام طريقة .on() في jQuery لتفويض الأحداث من خلال توفير وسيط إضافي هو selector. وتبدو بنيتها كما يلي:

$(parentSelector).on(event, childSelector, handler);

يُرفق مستمع الأحداث هنا بالعنصر parentSelector. ومع ذلك، لا تُنفَّذ دالة handler إلا إذا نشأ الحدث من عنصر متحدر يطابق childSelector.

مثال على تفويض الأحداث

سنطبّق الآن تفويض الأحداث لحل المشكلة من المشهد 2. سنرفق المستمع بالحاوية الأب (#my-list)، لكننا سنطلب منه الاستجابة فقط إذا جاءت النقرة من عنصر يطابق .item.

لاحظ أنه عند ظهور الزر الجديد، فإنه سيستجيب للنقرات الآن!

$(document).ready(function() {
  // Assume HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Event delegation: listener on the parent (#my-list)
  // It listens for clicks on any descendant matching '.item'
  $('#my-list').on('click', '.item', function() {
    $(this).text('Delegated click!');
  });

  // Simulate adding a new item after delegation setup
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Delegated Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it WILL respond!');
  }, 2000);
});

التعامل مع العناصر الديناميكية

تتمثل الفائدة الأساسية التي أوضحها المثال السابق في قدرة تفويض الأحداث على التعامل بسلاسة مع العناصر المضافة ديناميكيًا.

بما أن المستمع موجود على العنصر الأب الثابت، فستكون أي عناصر أبناء جديدة تطابق childSelector مشمولة تلقائيًا بهذا المستمع الواحد. ولا تحتاج إلى إعادة ربط الأحداث في كل مرة تضيف فيها محتوى!

تحسين الأداء

بالإضافة إلى التعامل مع المحتوى الديناميكي، يوفّر تفويض الأحداث مزايا كبيرة للأداء:

عدد أقل من المستمعين: بدلًا من إرفاق مستمع أحداث منفصل بمئات العناصر، لا تُرفق سوى مستمع واحد بالعنصر الأب المشترك بينها.
استهلاك أقل للذاكرة: يعني انخفاض عدد المستمعين استهلاك تطبيقك قدرًا أقل من الذاكرة.
بدء تشغيل أسرع: يقضي المتصفح وقتًا أقل في إعداد معالجات الأحداث عند تحميل الصفحة.

متى تفوّض الأحداث؟

تفويض الأحداث أداة قوية، لكنه ليس ضروريًا دائمًا. إليك الحالات المثالية لاستخدامه:

عند التعامل مع عدد كبير من العناصر المتشابهة (مثل عناصر قائمة طويلة أو صفوف جدول).
عند إضافة العناصر أو إزالتها ديناميكيًا من DOM بعد تحميل الصفحة الأولي.
عندما يكون الأداء مصدر قلق أساسيًا في معالجة الأحداث.

أفضل ممارسات التفويض

لتحقيق أقصى استفادة من تفويض الأحداث، اتبع أفضل الممارسات التالية:

اختر أقرب عنصر أب ثابت: فوّض الأحداث إلى أقرب سلف يُضمن وجوده عند تحميل الصفحة. تجنّب التفويض إلى document أو body إذا كان هناك عنصر أب أقرب مناسب.
افهم $(this): تشير $(this) داخل معالج مفوَّض إلى العنصر الأصلي الذي طابق childSelector، وليس إلى العنصر الأب المرفق به المستمع.
انتبه إلى الانتشار: رغم فائدته في التفويض، قد يؤدي انتشار الأحداث أحيانًا إلى آثار جانبية غير مقصودة إذا لم تتم إدارته (مثل استخدام event.stopPropagation()، الذي يتناوله درس آخر).

اختبر معلوماتك

أيّ من السيناريوهات التالية يُعد مناسبًا لاستخدام تفويض الأحداث؟

مراجعة تفويض الأحداث

أحسنت! لقد تعلّمت المبادئ الأساسية لتفويض الأحداث في jQuery.

تعلّمنا كيف يتيح .on() مع childSelector لمستمع واحد على العنصر الأب إدارة الأحداث لعدة عناصر فرعية، بما في ذلك العناصر المُضافة ديناميكيًا. وتُعد هذه التقنية مهمة لتحسين الأداء، وتبسيط الشيفرة، والتعامل بكفاءة مع المحتوى الديناميكي في تطبيقات jQuery الخاصة بكم.

إن إتقان التفويض سيجعل معالجة الأحداث لديكم قوية وقابلة للتوسّع!

الأسئلة الشائعة

هل درس «تطبيق تفويض الأحداث المتين» مجاني؟

نعم — نص درس «تطبيق تفويض الأحداث المتين» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.

ماذا ستتعلم في «تطبيق تفويض الأحداث المتين»؟

تعلّم مبادئ تفويض الأحداث وفوائده باستخدام .on() لمعالجة أحداث عناصر متعددة وحالية ومستقبلية بواسطة مستمع واحد، مما يحسّن الأداء. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟

لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.

كم من الوقت يستغرق درس «تطبيق تفويض الأحداث المتين»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟

نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى jQuery Academy