معالجة الأحداث ​

الاستماع للأحداث ​

يمكننا استخدام السمة المُوجهة v-on ،والتي نختصرها عادة بالرمز @ ،للإستماع إلى أحداث DOM وتنفيذ بعض شيفرات الـJavaScript عندما تشغل تلك الأحداث. يكون استخدامها على شكل v-on:click="handler" أو باختصار،@click="handler" .

قيمة المعالج يمكن أن تكون أحد الأشكال التالية:

1. مُعالِجات سطرية: شيفرة JavaScript ليتم تنفيذها عند تشغيل الحدث (مماثلة لسمة onclick الأصلية).

2. مُعالِجات عبر دوال: اسم خاصية أو مسار يشير إلى دالة معرفة في المكون.

مُعالِجات سطرية ​

المعالجات السطرية عادة ما تُستخدم في الحالات البسيطة، على سبيل المثال:

const count = ref(0)

data() {
    return {
        count: 0
    }
}

<button @click="count++">اضف 1</button>
<p>العداد: {{ count }}</p>

المعالجات بالدوال ​

الشيفرة في العديد من معالجات الأحداث ستكون أكثر تعقيدًا، ومن المحتمل أن لا تكون ممكنة مع المعالجات السطرية. هذا هو السبب في أن v-on يستطيع أيضًا قبول اسم أو مسار لدالة مكون حيث يمكنك استدعائها عند اطلاق الحدث.

مثال:

const name = ref('Vue.js')

function greet(event) {
  alert(`مرحبا ${name.value}!`)
  //`event` هو الحدث الأصلي من  DOM
  if (event) {
    alert(event.target.tagName)
  }
}

data() {
        return {
            name: 'Vue.js'
        }
    },
    methods: {
        greet(event) {
            //`this` داخل الدوال تشير إلى النسخة النشطة الحالية
            alert(`مرحبا ${this.name}!`)
            //`event` هو الحدث الأصلي من  DOM
            if (event) {
                alert(event.target.tagName)
            }
        }
    }

<!--  `greet` هو اسم الدالة المعرفة أعلاه -->
<button @click="greet">Greet</button>

الدالة المعالجة تتلقى تلقائيًا كائن حدث الـDOM الأصلي الذي يُشغل - في المثال أعلاه ، نستطيع الوصول إلى العنصر الذي يقوم باطلاق الحدث عبر event.target.tagName.

الكشف عن نوع المعالج، الدالة مقابل السطري ​

مصرف القالب يكشف عن معالجات الأحداث من خلال التحقق ما إذا كانت قيمة v-on سلسلة نصية عبارة عن مُعرَّف JavaScript صالح أو مسار وصول إلى الخاصية. على سبيل المثال ،foo ،foo.bar و foo['bar'] تعامَل كدوال معالجة الأحداث، بينما ()foo و ++count تعامل كمعالجات سطرية.

استدعاء الدوال في المعالجات السطرية ​

بدلا من الربط مباشرة باسم تابع/دالة، يمكننا أيضا استدعاء دوال في المعالجات السطرية، هذا يسمح لنا بتمرير بعض الوسائط المخصصة للدالة بدلا من كائن الحدث الأصلي

function say(message) {
  alert(message)
}

methods: {
    say(message) {
        alert(message)
    }
}

<button @click="say('مرحبا')">قل مرحبا</button>
<button @click="say('إلى اللقاء')">قل إلى اللقاء</button>

الوصول إلى وسيط الحدث الأصلي في المعالجات السطرية ​

في بعض الأحيان نحتاج أيضا إلى الوصول إلى وسيط الحدث الأصلي في معالج سطري. يمكنك تمريره إلى دالة باستخدام المتغير الخاص event$ ، أو استخدام دالة سهم سطرية:

<!--  باستخدام المتغير الخاص $event -->
<button @click="warn('لا يمكن إرسال النموذج.', $event)">
  إرسال
</button>

<!--  باستخدام دالة سهم سطرية -->
<button @click="(event) => warn('لا يمكن إرسال النموذج.', event)">
  إرسال
</button>

function warn(message, event) {
    // الآن لدينا وصول إلى الحدث الأصلي
    if (event) {
        event.preventDefault()
    }
    alert(message)
}

methods: {
    warn(message, event) {
       // الآن لدينا وصول إلى الحدث الأصلي
        if (event) {
            event.preventDefault()
        }
        alert(message)
    }
}

مُعدِّلات الأحداث ​

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

لمعالجة هذه المشكلة، توفر Vue مُعدِّلات الأحداث لـ v-on . تذكر أن المُعدِّلات هي بادئات المُوجهات التي يشار إليها بنقطة.

• stop.
• prevent.
• self.
• capture.
• once.
• passive.

<!-- حدث النقر سيوقف انتشاره -->
<a @click.stop="doThis"></a>

<!-- حدث الإرسال لن يعيد تحميل الصفحة -->
<form @submit.prevent="onSubmit"></form>

<!-- المُعدِّلات يمكن أن تكون متسلسلة -->
<a @click.stop.prevent="doThat"></a>

<!-- المُعدِّل فقط -->
<form @submit.prevent></form>

<!-- شغل المعالج فقط إذا كان event.target هو العنصر نفسه -->
<!-- أي ليس من عنصر ابن -->
<div @click.self="doThat">...</div>

المُعدِّلات .capture، .once، و .passive توافق خيارات الدالة الأصلية addEventListener :

<!--  استخدم وضع الالتقاط عند إضافة مستمع الحدث -->
<!-- مثال: يعالج الحدث الهدف لعنصر داخلي هنا قبل أن يعالج من قبل العنصر ذاته -->
<div @click.capture="doThis">...</div>

<!-- حدث النقر على الأكثر مرة واحدة -->
<a @click.once="doThis"></a>

<!--   سيحدث السلوك الافتراضي لحدث  التمرير فورا-->
<!-- بدل من الانتظار لإكمال `onScroll` -->
<!-- في حالة احتوائه على `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

المُعدِّل .passive عادة ما يُستخدم مع مستمعي الأحداث اللمسية لتحسين أداء الأجهزة المحمولة.

مُعدِّلات المفتاح ​

عند الاستماع لأحداث لوحة المفاتيح، نحتاج في كثير من الأحيان إلى التحقق من مفاتيح معينة. تسمح لنا Vue بإضافة مُعدِّلات المفاتيح لـ v-on أو @ عند الاستماع لأحداث المفاتيح:

<!-- استدع الدالة `submit` فقط عندما ينقر على المفتاح `Enter` -->
<input @keyup.enter="submit" />

يمكنك استخدام أي أسماء مفاتيح صالحة معروضة عبر KeyboardEvent.key كمُعدِّلات مباشرة بتحويلها إلى صيغة اسياخ الشواء kebab-case.

<input @keyup.page-down="onPageDown" />

في المثال أعلاه، سيتم استدعاء المُعدِّل فقط إذا كان event.key$ يساوي 'PageDown' .

الأسماء البديلة للمفاتيح ​

Vue توفر أسماء بديلة للمفاتيح الأكثر استخداماً:

• enter.
• tab.
• delete. (يلتقط كلاً من مفتاحي "Delete" و "Backspace")
• esc.
• space.
• up.
• down.
• left.
• right.

مُعدِّلات مفاتيح النظام ​

يمكنك استخدام المُعدِّلات التالية لتشغيل مستمعي أحداث الفأرة أو لوحة المفاتيح فقط عند الضغط على مفتاح المُعدِّل المطابق:

• ctrl.
• alt.
• shift.
• meta.

على سبيل :

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">قم بعمل ما</div>

المُعدِّل exact. ​

المُعدِّل exact. يسمح بالتحكم في التركيبة الدقيقة لمُعدّلات النظام اللازمة لتشغيل حدث ما.

<!-- هذا سيشغل حتى إذا كان Alt أو Shift مضغوطاً أيضاً -->
<button @click.ctrl="onClick">أ</button>

<!-- هذا سيشغل فقط إذا كان Ctrl ولا مفتاح آخر مضغوطاً -->
<button @click.ctrl.exact="onCtrlClick">أ</button>

<!-- هذا سيشغل فقط إذا لم يضغط على أي مُعدِّلات نظام -->
<button @click.exact="onClick">أ</button>

مُعدِّلات أزرار الفأرة ​

• .left
• .right
• .middle

هذه المُعدِّلات تقيد المُعالِج بالأحداث التي شُغلت بواسطة زر فأرة معين.