تمرير الأحداث باستخدام on:click
أعد إطلاق أحداث المكوّن إلى المكوّن الأصل باستخدام التوجيه on: المجرد
تمرير الأحداث باستخدام on:click درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
تمرير الأحداث
لإعادة إصدار حدث عنصر ابن عبر المكوّن إلى الأعلى، اكتبوا on:event من دون معالج.
التمرير الأساسي
يمرّر هذا الإعداد نقرة الزر الداخلي إلى مستهلك MyButton.
<button on:click>Click</button>الاستماع بصفتكم مكوّنًا أبًا
يستمع المكوّن الأب إلى المكوّن بالطريقة نفسها التي يستمع بها إلى عنصر من عناصر DOM.
<MyButton on:click={handle} />تمرير عدة أحداث
يمكنكم تمرير أي عدد تريدونه من الأحداث الأصلية.
<input on:input on:focus on:blur />تفوّق مكوّنات التغليف
يُعدّ هذا النمط أساسيًا لبناء مكوّنات التغليف مثل الأزرار وحقول الإدخال والروابط.
الدمج مع الأحداث المخصّصة
اخلطوا بحرية بين أحداث DOM الممرَّرة وأحداث createEventDispatcher الخاصة بكم.
الحفاظ على كائن الحدث
تصل الأحداث الممرَّرة إلى المكوّن الأب مع بقاء كائن Event الأصلي في DOM كما هو.
لا حاجة إلى معدِّلات
إذا أردتم أن يتولى المكوّن الأب مسؤولية المعدِّلات، فاتركوها في العنصر الابن.
الفرق عن الأحداث المخصّصة
يعيد التمرير إصدار أحداث DOM الحقيقية، أما الإرسال المخصّص فينشئ أحداثًا جديدة.
ملائم لـ TypeScript
تحتفظ الأحداث الممرَّرة بأنواعها الدقيقة عندما يعرّفها المكوّن الأب في TypeScript.
في العالم الحقيقي
تستخدم معظم مكوّنات أنظمة التصميم التمرير للحفاظ على المرونة من دون إدراج كل خاصية على حدة.
تحقق سريع
ماذا يفعل on:click من دون معالج؟
مراجعة
تمرّر توجيهات on:event المجردة أحداث DOM إلى المكوّن الأب، مما يتيح إنشاء واجهات برمجية نظيفة لمكوّنات التغليف.
الأسئلة الشائعة
هل درس «تمرير الأحداث باستخدام on:click» مجاني؟
نعم — نص درس «تمرير الأحداث باستخدام on:click» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «تمرير الأحداث باستخدام on:click»؟
أعد إطلاق أحداث المكوّن إلى المكوّن الأصل باستخدام التوجيه on: المجرد تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «تمرير الأحداث باستخدام on:click»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- on:click وon:input وon:submit
- معدّلات الأحداث: preventDefault وstopPropagation وonce
- الأحداث المخصصة باستخدام createEventDispatcher
- تمرير الأحداث باستخدام on:click