JavaScript Academy · درس

preventDefault وstopPropagation

تحكّموا في السلوك الافتراضي وانتشار الأحداث.

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

التحكم في سلوك الأحداث

تتيح لكم آليتان التحكم في الأحداث: إيقاف الإجراء الافتراضي للمتصفح، وإيقاف انتقال الحدث عبر DOM.

الإجراءات الافتراضية

تملك عناصر كثيرة سلوكيات افتراضية مضمّنة: تنتقل الروابط إلى صفحات أخرى، ويؤدي إرسال النموذج إلى إعادة التحميل، وتبدّل مربعات الاختيار حالتها. وتحدث هذه السلوكيات ما لم تتدخلوا.

preventDefault

تلغي event.preventDefault الإجراء الافتراضي للمتصفح، مع استمرار تشغيل دالة المعالجة.

link.addEventListener("click", (e) => {
  e.preventDefault(); // stop navigation
  console.log("handled in JS");
});

preventDefault مع النماذج

من الاستخدامات الشائعة منع النموذج من إعادة تحميل الصفحة، حتى تتمكنوا من معالجة الإرسال باستخدام JavaScript.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // send data via fetch instead
});

انتشار الأحداث

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

stopPropagation

تمنع event.stopPropagation الحدث من مواصلة الانتقال إلى العناصر الأسلاف. ومع ذلك، تستمر دالة المعالجة الحالية حتى نهايتها.

child.addEventListener("click", (e) => {
  e.stopPropagation(); // parent listeners will not fire
});

preventDefault في مقابل stopPropagation

الآليتان مستقلتان. تلغي preventDefault إجراء المتصفح، بينما تلغي stopPropagation انتقال الحدث إلى العناصر الأخرى. ويمكنكم استخدام أي منهما أو كليهما أو عدم استخدام أي منهما.

e.preventDefault();   // no default action
e.stopPropagation();  // no bubbling

مستمعون آخرون على العنصر نفسه

لا توقف stopPropagation المستمعين الآخرين على العنصر نفسه من العمل. فهم يستمرون في التشغيل.

el.addEventListener("click", (e) => e.stopPropagation());
el.addEventListener("click", () => console.log("still runs"));

stopImmediatePropagation

تذهب stopImmediatePropagation إلى أبعد من ذلك: فهي توقف الانتشار التصاعدي، وتمنع أيضًا أي مستمعين متبقين على العنصر نفسه.

el.addEventListener("click", (e) => e.stopImmediatePropagation());
el.addEventListener("click", () => console.log("does NOT run"));

defaultPrevented

يمكنكم التحقق من event.defaultPrevented لمعرفة ما إذا كانت دالة معالجة سابقة قد استدعت preventDefault بالفعل.

el.addEventListener("click", (e) => {
  console.log(e.defaultPrevented);
});

استخدموه باعتدال

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

اختبار سريع

اختاروا الطريقة الصحيحة.

مراجعة

تلغي preventDefault الإجراء الافتراضي للمتصفح (مثل الانتقال وإرسال النموذج وغيرهما). ويوقف stopPropagation انتشار الحدث تصاعديًا إلى العناصر الأسلاف، بينما يمنع stopImmediatePropagation أيضًا المستمعين الآخرين على العنصر نفسه. وهذه أدوات مستقلة؛ فاستخدموا إيقاف الانتشار باعتدال لتجنب تعطيل تفويض الأحداث.

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

هل درس «preventDefault وstopPropagation» مجاني؟

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

ماذا ستتعلم في «preventDefault وstopPropagation»؟

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

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

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

كم من الوقت يستغرق درس «preventDefault وstopPropagation»؟

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

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

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

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

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