Vue Academy · درس

معدّلات أحداث v-on

.stop و.prevent و.self و.once و.capture و.passive — متى ولماذا يُستخدم كل معدّل

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

معالجة الأحداث بصورة أنظف

يُرفق توجيه v-on (واختصاره @) مستمعي الأحداث. وتتعامل معدّلات الأحداث، وهي لواحق، مع المهام الشائعة في DOM مثل إيقاف الانتشار أو منع السلوك الافتراضي، لتظل معالجاتك مركّزة على المنطق.

المشكلة التي تحلها المعدّلات

من دون المعدّلات، ستضطر إلى تكرار التعليمات البرمجية الخاصة بـ DOM داخل المعالجات، مثل استدعاء event.preventDefault() أو event.stopPropagation(). وتنقل المعدّلات هذه المهمة إلى القالب بطريقة تصريحية.

.stop لإيقاف stopPropagation

يمنع .stop انتشار الحدث إلى العناصر الأب — وهو مكافئ لاستدعاء event.stopPropagation().

<!-- inner click will not reach the outer handler -->
<div @click="onOuter">
  <button @click.stop="onInner">Click</button>
</div>

.prevent لمنع preventDefault

يستدعي .prevent الدالة event.preventDefault(). ومن الاستخدامات الشائعة له منع النموذج من إعادة تحميل الصفحة عند إرساله.

<form @submit.prevent="onSubmit">
  <button type="submit">Save</button>
</form>

تسلسل المعدّلات

يمكنك دمج المعدّلات. والترتيب مهم — إذ تُطبَّق من اليسار إلى اليمين.

<a @click.stop.prevent="onClick">Link</a>

.self: العنصر نفسه فقط

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

<!-- closes only when the backdrop itself is clicked -->
<div class="backdrop" @click.self="close">
  <div class="modal">...</div>
</div>

معدّلات المفاتيح

في أحداث لوحة المفاتيح، يمكنك الاستماع إلى مفاتيح محددة. يُشغّل @keyup.enter المعالج فقط عند تحرير مفتاح Enter.

<input @keyup.enter="search" />

مزيد من معدّلات المفاتيح

يوفّر Vue اختصارات للمفاتيح الشائعة: .enter و.esc و.tab و.delete و.space، بالإضافة إلى مفاتيح الأسهم مثل .up و.down.

<input @keyup.esc="cancel" @keyup.up="previous" />

.once: تشغيل المعالج مرة واحدة فقط

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

<button @click.once="initialize">Start</button>

.passive لتحسين أداء التمرير

يخبر .passive المتصفح بأن المعالج لن يستدعي preventDefault(). ويسمح ذلك للمتصفح بالتمرير بسلاسة من دون انتظار، مما يحسّن الأداء في أحداث اللمس والتمرير.

<div @scroll.passive="onScroll">...</div>

اختيار المعدّل المناسب

.stop — إيقاف الانتشار.
.prevent — منع السلوك الافتراضي.
.self — تجاهل أحداث العناصر الفرعية المنتشرة.
.once — التشغيل مرة واحدة.
.passive — عدم منع السلوك الافتراضي مطلقًا؛ وتحسين أداء التمرير.

ملاحظة: لا تدمج .passive مع .prevent مطلقًا — فهما متعارضان.

اختبار سريع

اختر المعدّل المناسب.

خلاصة

تحافظ معدّلات الأحداث على نظافة المعالجات:

.stop = stopPropagation، و.prevent = preventDefault.
يُشغّل .self المعالج على العنصر نفسه فقط.
تستهدف معدّلات المفاتيح مثل .enter مفاتيح محددة.
يشغّل .once المعالج مرة واحدة؛ ويحسّن .passive أداء التمرير.

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

هل درس «معدّلات أحداث v-on» مجاني؟

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

ماذا ستتعلم في «معدّلات أحداث v-on»؟

.stop و.prevent و.self و.once و.capture و.passive — متى ولماذا يُستخدم كل معدّل تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «معدّلات أحداث v-on»؟

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

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

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

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

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