العمل مع الأحداث في Svelte

تعرف على كيفية التعامل مع الأحداث في Svelte

الاستماع إلى أحداث DOM

في Svelte ، يمكنك تحديد مستمع لحدث DOM مباشرة في القالب ، باستخدام امتدادon:<event>بناء الجملة.

على سبيل المثال ، للاستماع إلىclickالحدث ، سوف تقوم بتمرير وظيفة إلىon:clickينسب.

للاستماع إلىonmousemoveالحدث ، سوف تقوم بتمرير وظيفة إلىon:mousemoveينسب.

فيما يلي مثال مع وظيفة المعالجة المحددة في الصفحة:

<button on:click={() => {
  alert('clicked')
}}>Click me</button>

وإليك مثال آخر مع وظيفة المعالجة المحددة في ملفscriptقسم المكون:

<script>
const doSomething = () => {
  alert('clicked')
}
</script>

<button on:click={doSomething}>Click me</button>

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

يمرر Svelte معالج الأحداث كوسيطة للوظيفة ، وهو أمر مفيد إذا كنت بحاجة إلى إيقاف النشر أو الإشارة إلى شيء ما فيكائن الحدث:

<script>
const doSomething = event => {
  console.log(event)
  alert('clicked')
}
</script>

<button on:click={doSomething}>Click me</button>

الآن ، ذكرت "وقف التكاثر". هذا أمر شائع جدًا ، لإيقاف أحداث إرسال النموذج على سبيل المثال. يوفر لنا Svelteالصفات التعريفية، وهي طريقة لتطبيقه مباشرة دون القيام بذلك يدويًا.stopPropagationوpreventDefaultهما المعدلات 2 التي ستستخدمها كثيرًا ، على ما أعتقد

تقوم بتطبيق معدل مثل هذا:<button on:click|stopPropagation|preventDefault={doSomething}>Click me</button>

هناك معدِّلات أخرى أكثر تخصصًا.captureتمكنالتقاط الأحداث بدلاً من الفقاعاتوonceأطلق الحدث مرة واحدة فقط ،selfيطلق الحدث فقط إذا كان هدف الحدث هو هذا الكائن (إزالته من التسلسل الهرمي / الالتقاط)

خلق الأحداث الخاصة بك في المكونات

الأمر المثير للاهتمام هو أنه يمكننا إنشاء أحداث مخصصة في المكونات ، واستخدام نفس بنية أحداث DOM المضمنة.

للقيام بذلك ، يجب علينا استيراد ملفcreateEventDispatcherوظيفة منsvelteقم بالحزمة واسميها للحصول على مرسل الحدث:

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()
</script>

بمجرد القيام بذلك ، يمكننا استدعاءdispatch()دالة ، تمرير سلسلة تحدد الحدث (والتي سنستخدمها لـon:بناء الجملة في المكونات الأخرى التي تستخدم هذا):

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()

//when it’s time to trigger the event dispatch(‘eventName’) </script>

الآن يمكن للمكونات الأخرى استخدام مكوناتنا

<ComponentName on:eventName={event => {
  //do something
}} />

يمكنك أيضًا تمرير كائن إلى الحدث ، وتمرير معلمة ثانية إلىdispatch():

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()
  const value = 'something'

//when it’s time to trigger the event dispatch(‘eventName’, value)

//or dispatch(‘eventName’, { someProperty: value }) </script>

الشيء الذي مر بهdispatch()متاح فيeventكائنevent.detail.

تحميل مجانيكتيب Svelte


المزيد من البرامج التعليمية svelte: