معدّلات الأحداث: preventDefault وstopPropagation وonce
استخدم المعدّلات المفصولة بالرمز | لتغيير سلوك الأحداث دون شيفرة إضافية
معدّلات الأحداث: preventDefault وstopPropagation وonce درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
صياغة المعدِّلات
أضيفوا المعدِّلات إلى اسم الحدث باستخدام محرف الأنبوب.
<form on:submit|preventDefault={save}>preventDefault
يستدعي event.preventDefault() قبل تشغيل المعالج. ولا حاجة إلى استدعائه يدويًا.
stopPropagation
يستدعي event.stopPropagation() لمنع انتقال الحدث إلى العناصر الأب.
<div on:click|stopPropagation={inner}>once
تُزال المعالجة بعد الاستدعاء الأول. وهذا مفيد لأحداث الإعداد التي تُنفَّذ مرة واحدة.
<button on:click|once={track}>Buy</button>passive
يضع علامة على المستمع باعتباره سلبيًا، لإبلاغ المتصفح بأنه لن يستدعي preventDefault. وهذا يحسّن أداء التمرير.
<div on:touchstart|passive={start}>capture
يشغّل المعالج أثناء مرحلة الالتقاط بدلًا من مرحلة الانتشار.
self
يُشغَّل فقط عندما يكون هدف الحدث هو العنصر نفسه، وليس أحد عناصره الابنة.
<div on:click|self={close}>nonpassive
يفرض جعل حدث يكون سلبيًا افتراضيًا غير سلبي، حتى تتمكنوا من استدعاء preventDefault عليه.
trusted
يُشغَّل فقط للأحداث التي يُحفّزها إدخال المستخدم، وليس أحد البرامج النصية.
دمج المعدِّلات
سلسلوا عدة معدِّلات باستخدام محارف الأنبوب.
<a on:click|preventDefault|stopPropagation={go}>Click</a>لماذا نستخدم المعدِّلات
تُبقي المعالجات مركّزة على منطق الأعمال وتزيل التعليمات البرمجية المتكررة.
تحقق سريع
ماذا يفعل |once؟
مراجعة
تُبسّط معدِّلات مثل preventDefault وstopPropagation وonce وpassive التعديلات الشائعة على الأحداث.
الأسئلة الشائعة
هل درس «معدّلات الأحداث: preventDefault وstopPropagation وonce» مجاني؟
نعم — نص درس «معدّلات الأحداث: preventDefault وstopPropagation وonce» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «معدّلات الأحداث: preventDefault وstopPropagation وonce»؟
استخدم المعدّلات المفصولة بالرمز | لتغيير سلوك الأحداث دون شيفرة إضافية تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «معدّلات الأحداث: preventDefault وstopPropagation وonce»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- on:click وon:input وon:submit
- معدّلات الأحداث: preventDefault وstopPropagation وonce
- الأحداث المخصصة باستخدام createEventDispatcher
- تمرير الأحداث باستخدام on:click