on:click وon:input وon:submit
أضف مستمعي أحداث DOM مباشرةً باستخدام صيغة قوالب Svelte
on:click وon:input وon:submit درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
توجيهات الأحداث
استخدموا on: متبوعًا باسم حدث DOM لإرفاق مستمع.
<button on:click={handleClick}>Click</button>المعالجات المضمنة
مرروا دالة سهمية للمنطق المضمن.
<button on:click={() => count++}>+</button>المعالجات المُسمّاة
عرّفوا دالة في script وأشيروا إليها باسمها.
<script>
function save() { /* ... */ }
</script>
<button on:click={save}>Save</button>استلام كائن الحدث
يتلقى المعالج Event الأصلي باعتباره وسيطًا.
function onChange(e) { value = e.target.value; }on:input
يُطلَق حدث input كلما كتب المستخدم في حقل نصي.
<input on:input={(e) => text = e.target.value} />on:submit
أرفقوه بعنصر <form> لمعالجة الإرسال. استخدموا المعدِّلات لمنع السلوك الافتراضي.
<form on:submit|preventDefault={save}>...</form>on:keydown
استمعوا إلى أحداث لوحة المفاتيح على المدخلات أو على مستوى document بالكامل.
<input on:keydown={(e) => e.key === "Enter" && submit()} />on:change في مقابل on:input
يُطلَق حدث change عندما ينتهي المستخدم من التحرير، بينما يُطلَق input مع كل ضغطة مفتاح.
أحداث الفأرة
تعمل جميع أحداث الفأرة القياسية في DOM: mouseenter وmouseleave وmousemove.
أحداث اللمس
تُدعَم أحداث لمس الأجهزة المحمولة مثل touchstart بالطريقة نفسها.
<div on:touchstart={start} on:touchend={end}>مستمعون متعددون
يمكنكم إرفاق عدة توجيهات on: بالعنصر نفسه لأحداث مختلفة.
<button on:click={a} on:focus={b}>...</button>تحقق سريع
ما الصياغة التي تُرفق معالج النقر؟
مراجعة
استخدموا توجيهات on:event مع أي حدث من أحداث DOM. ويمكن أن يكون المعالج مضمّنًا أو دالة مُسمّاة، ويتلقى كائن Event.
الأسئلة الشائعة
هل درس «on:click وon:input وon:submit» مجاني؟
نعم — نص درس «on:click وon:input وon:submit» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «on:click وon:input وon:submit»؟
أضف مستمعي أحداث DOM مباشرةً باستخدام صيغة قوالب Svelte تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «on:click وon:input وon:submit»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- on:click وon:input وon:submit
- معدّلات الأحداث: preventDefault وstopPropagation وonce
- الأحداث المخصصة باستخدام createEventDispatcher
- تمرير الأحداث باستخدام on:click