معالجة الأحداث في TypeScript

يشرح هذا المقال طريقة التعامل مع الأحداث في TypeScript۔

يمكنك تعلم طرق التعامل مع الأحداث والأحداث المخصصة من خلال أمثلة برمجية۔

YouTube Video

معالجة الأحداث في TypeScript

معالجة الأحداث في TypeScript تتم بنفس الطريقة كما في JavaScript، لكن TypeScript يحسن أمان الأنواع، مما يتيح لك التعامل مع الأحداث بأمان باستخدام الأنواع المناسبة للأحداث۔ أساسيات معالجة الأحداث تتضمن إضافة مستمعي أحداث لعناصر DOM وتنفيذ إجراءات استجابةً لتفاعلات المستخدم۔

إضافة مستمعي الأحداث

يتم إضافة مستمعي الأحداث لعناصر DOM باستخدام طريقة addEventListener۔ على سبيل المثال، لمعالجة حدث النقر (click)، ستقوم بالتالي:۔

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event) => {
4        console.log('Button was clicked');
5    });
6}

• في هذا الكود، يتم استخدام addEventListener لتسجيل معالج لحدث النقر على عنصر الـ DOM المحدد.۔

أنواع الأحداث في TypeScript

في TypeScript، يتم تعيين النوع المناسب لكائن event الذي يستقبله مستمع الحدث تلقائيًا۔ كائن event لديه خصائص مختلفة اعتمادًا على نوع الحدث، لكن نوعه الأساسي هو Event۔

باستخدام النوع المناسب لكل حدث، يمكنك الاستفادة من أمان الأنواع في TypeScript أثناء تطويرك۔

أنواع الأحداث الرئيسية

1. Event Event هو النوع الأساسي للأحداث الشائعة۔ يُستخدم لأشياء مثل إرسال النماذج أو إكمال تحميل الصفحات۔

1const form = document.getElementById('myForm');
2if (form) {
3    form.addEventListener('submit', (event: Event) => {
4        event.preventDefault();  // Prevent the default form submission
5        console.log('Form was submitted');
6    });
7}

• يعتمد هذا الكود حدث إرسال النموذج، يمنع إجراء الإرسال الافتراضي، ويطبع رسالة في وحدة التحكم بدلاً من ذلك۔

2. MouseEvent

   MouseEvent هو نوع حدث مرتبط بأفعال الفأرة مثل النقر وحركة الماوس۔ يمكنك الحصول على معلومات حول إحداثيات الماوس وأي زر تم النقر عليه۔

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event: MouseEvent) => {
4        // Log the click position
5        console.log(`Click position: X=${event.clientX}, Y=${event.clientY}`);
6    });
7}

• يُحصل هذا الكود على إحداثيات الماوس عند النقر على الزر ويعرضها في وحدة التحكم۔

3. KeyboardEvent KeyboardEvent هو نوع حدث متعلق بإدخال لوحة المفاتيح۔ يمكنك الوصول إلى الزر المضغوط وحالة مفاتيح التعديل (Shift، Alt، Ctrl، إلخ)۔

1document.addEventListener('keydown', (event: KeyboardEvent) => {
2    // Log the pressed key
3    console.log(`Key pressed: ${event.key}`);
4    if (event.ctrlKey) {
5        // Log that the Ctrl key was pressed
6        console.log('Ctrl key was pressed');
7    }
8});

• يعرض هذا الكود اسم المفتاح المضغوط، وإذا استُمر ضغط مفتاح Ctrl، فإنه يطبع تلك المعلومات أيضًا في وحدة التحكم۔

4. InputEvent InputEvent هو نوع حدث متعلق بالتغييرات في حقول الإدخال۔ يُستخدم عندما تتغير قيمة حقل نصي أو حقل نص متعدد الأسطر۔

1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: InputEvent) => {
4        // Log the entered value
5        console.log(`Entered value: ${input.value}`);
6    });
7}

• يعرض هذا الكود محتوى حقل الإدخال في وحدة التحكم في كل مرة يتغير فيها قيمته۔

5. FocusEvent FocusEvent هو نوع حدث يحدث عند تركيز أو فقدان تركيز عنصر معين۔

 1const input = document.getElementById('myInput');
 2if (input) {
 3    input.addEventListener('focus', (event: FocusEvent) => {
 4        // Log when the input gains focus
 5        console.log('Focused');
 6    });
 7
 8    input.addEventListener('blur', (event: FocusEvent) => {
 9        // Log when the input loses focus
10        console.log('Blurred');
11    });
12}

• يعرض هذا الكود "مُركز" في وحدة التحكم عند تركيز حقل الإدخال، و"غير مركز" عند فقدان التركيز۔

معالجة الأحداث المخصصة باستخدام إثبات النوع

بالنسبة للأحداث المخصصة أو عندما لا يعمل استنتاج النوع في TypeScript، يمكنك تحديد النوع صراحةً باستخدام إثبات النوع۔

على سبيل المثال، لمعالجة حدث لعنصر إدخال معين (HTMLInputElement)، حدد النوع كما يلي:۔

1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: Event) => {
4        const target = event.target as HTMLInputElement;
5        // Log the entered value
6        console.log(`Entered value: ${target.value}`);
7    });
8}

• يستخدم هذا الكود التأكيد على النوع ليعامل هدف الحدث كعنصر إدخال HTML ويعرض قيمته في وحدة التحكم۔

إزالة مستمعي الأحداث

يمكنك إزالة مستمعي الأحداث باستخدام removeEventListener۔ لهذا، تحتاج إلى تمرير نفس معالج الحدث الذي تمت إضافته في البداية۔

 1const button = document.getElementById('myButton');
 2
 3const handleClick = (event: MouseEvent) => {
 4    // Log when the button is clicked
 5    console.log('Button was clicked');
 6};
 7
 8if (button) {
 9    button.addEventListener('click', handleClick);
10
11    // Remove the event listener later
12    button.removeEventListener('click', handleClick);
13}

• يضيف هذا الكود مستمع حدث عند النقر على الزر، ثم يزيله بتحديد نفس المعالج۔

إنشاء أحداث مخصصة

في TypeScript، بالإضافة إلى الأحداث القياسية، يمكنك أيضًا إنشاء وإرسال أحداث مخصصة۔ استخدم فئة CustomEvent لإنشاء حدث مخصص وقيامه باستخدام طريقة dispatchEvent۔

 1const customEvent = new CustomEvent('myCustomEvent', { detail: { name: 'TypeScript' } });
 2const div = document.getElementById('myDiv');
 3
 4if (div) {
 5    div.addEventListener('myCustomEvent', (event: CustomEvent) => {
 6        // Log when the custom event is fired
 7        console.log(`Custom event was triggered: ${event.detail.name}`);
 8    });
 9
10    div.dispatchEvent(customEvent);  // Dispatch the custom event
11}

• يُنشئ هذا الكود حدثًا مخصصًا باستخدام CustomEvent، ويرسله إلى العنصر، ويعرض تفاصيله في وحدة التحكم۔

التحكم في انتشار الأحداث

عندما يحدث حدث، فإنه ينتشر افتراضيًا (ينتقل إلى العناصر الأب)۔ لمنع ذلك، استخدم event.stopPropagation()۔ يمكنك أيضًا استخدام preventDefault() لمنع سلوك المتصفح الافتراضي۔

 1const button = document.getElementById('myButton');
 2if (button) {
 3    button.addEventListener('click', (event: MouseEvent) => {
 4        event.preventDefault();  // Prevent the default action
 5        event.stopPropagation();  // Stop the event propagation
 6
 7        // Log that event handling has been customized
 8        console.log('Custom event handling');
 9    });
10}

• يُعطل هذا الكود الإجراء الافتراضي عند النقر على الزر، ويوقف تصعيد الحدث، وينفذ معالجة مخصصة۔

الملخص

معالجة الأحداث في TypeScript هي في الأساس مثل JavaScript، لكن مع تعريفات النوع الصحيحة، يمكنك العمل بأمان وموثوقية مع كائنات الأحداث وعناصر الـ DOM۔ من خلال إضافة وإزالة مستمعي الأحداث، وتطبيق أنواع الأحداث، واستخدام إثبات النوع، يمكنك تحقيق معالجة أحداث أوضح وأقل عرضة للأخطاء۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video