الاستماع لتفاعلات المستخدم عبر ربط الأحداث

ربط الأحداثEvent Bindingتفاعلات المستخدمأحداث Angular 22.1DOM

جدول مرجعي سريع

نوع الحدث في الـ DOM	صيغة الاستخدام بالأقواس الهلالية	متى يتم تفعيل الحدث واستخدامه
حدث النقر	(click)	عندما يضغط المستخدم بالفأرة أو باللمس على زر أو عنصر واجهة
حدث الإدخال والكتابة	(input)	عند كل حرف يتم إدخاله داخل حقول النص أو البحث لحظياً
حدث تغيير القيمة	(change)	عند اكتمال التغيير وفقدان التركيز مثل قوائم الخيارات المنسدلة select
حدث إرسال النموذج	(submit)	عند قيام المستخدم بضغط زر إرسال البيانات ضمن نموذج HTML متكامل

الشرح

نصل في هذا الدرس إلى محطة بالغة الأهمية ضمن الفصل الخامس، وهي ربط الأحداث (Event Binding) في إصدار Angular 22.1. إذا كان ربط الخصائص والربط النصي مسؤولين عن تدفق البيانات من المكون إلى الواجهة، فإن ربط الأحداث يمثل الطريق المعاكس (من القالب إلى المكون)، حيث يتيح لك الاستماع الفوري لتفاعلات المستخدم (مثل النقرات، الكتابة، تحريك الفأرة، أو إرسال النماذج) وتنفيذ الدوال البرمجية المناسبة استجابةً لها.

تفصيل فلسفة وعمل ربط الأحداث

صيغة الأقواس الهلالية (Event Binding Syntax):

يتم وضع اسم حدث الـ DOM بين أقواس هلالية مثل (click)="myFunction()"، حيث يخبر هذا الرمز محرك أنجولر بالاستماع لهذا الحدث تحديداً وتنفيذ الدالة البرمجية المكتوبة في الطرف الأيمن عند وقوعه.

كائن الحدث الخاص ($event):

يتيح لك أنجولر تمرير كائن الحدث الأصلي عبر المتغير الخاص $event (مثل (input)="onInputChange($event)")، مما يمنحك وصولاً مباشراً لبيانات العنصر وتفاصيل التفاعل التقنية مثل قيمة حقل الإدخال أو زر لوحة المفاتيح المضغوط.

أمثلة برمجية: الاستماع لأحداث النقر والإدخال

المثال الأول: ربط أحداث النقر وتغيير حالات المكون

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-event-binding-demo',
5	standalone: true,
6	template: `
7	<div class="counter-box">
8	<h3>العداد التفاعلي: {{ count }}</h3>
9
10	<!-- استماع لحدث النقر لزيادة العدد -->
11	<button (click)="incrementCount()">زيادة القيمة</button>
12
13	<!-- استماع لحدث النقر لتصفير العداد -->
14	<button (click)="resetCount()">إعادة ضبط</button>
15	</div>
16	`
17	})
18	export class EventBindingDemoComponent {
19	count = 0;
20
21	incrementCount() {
22	this.count += 1;
23	}
24
25	resetCount() {
26	this.count = 0;
27	}
28	}

أمثلة برمجية: التعامل مع كائن الحدث ($event) وقيم المدخلات

المثال الثاني: التقاط بيانات الكتابة عبر حدث الـ input باستخدام $event

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-user-input-demo',
5	standalone: true,
6	template: `
7	<div class="input-panel">
8	<!-- استماع لحدث الإدخال وتمرير كائن الحدث -->
9	<input type="text" (input)="updateUserName($event)" placeholder="ادخل اسمك الكامل...">
10
11	<p>النصوص المدخلة حالياً: {{ typedName }}</p>
12	</div>
13	`
14	})
15	export class UserInputDemoComponent {
16	typedName = '';
17
18	updateUserName(event: Event) {
19	// استخراج القيمة المدخلة بوضوح من عنصر الـ input المستهدف
20	const inputElement = event.target as HTMLInputElement;
21	this.typedName = inputElement.value;
22	}
23	}

نصائح احترافية

—استخدم الأقواس الهلالية (event) دائماً لالتقاط تفاعلات المستخدم، واحرص على فصل المنطق البرمجي داخل صنف المكون!
—تجنب كتابة عمليات معقدة وطويلة مباشرة داخل الأقواس الهلالية في القالب، وضعها دائماً داخل دوال واضحة في ملف الـ TypeScript لضمان صيانة النطاق البرمجي بسهولة تامة.

الدرس السابق

ربط خصائص عناصر HTML ديناميكياً

الدرس التالي

الربط ثنائي الاتجاه وتوجيه ngModel

نوع الحدث في الـ DOM

صيغة الاستخدام بالأقواس الهلالية

متى يتم تفعيل الحدث واستخدامه

حدث النقر

(click)

عندما يضغط المستخدم بالفأرة أو باللمس على زر أو عنصر واجهة

حدث الإدخال والكتابة

(input)

عند كل حرف يتم إدخاله داخل حقول النص أو البحث لحظياً

حدث تغيير القيمة

(change)

عند اكتمال التغيير وفقدان التركيز مثل قوائم الخيارات المنسدلة select

حدث إرسال النموذج

(submit)

عند قيام المستخدم بضغط زر إرسال البيانات ضمن نموذج HTML متكامل

تفصيل فلسفة وعمل ربط الأحداث

صيغة الأقواس الهلالية (Event Binding Syntax):

كائن الحدث الخاص ($event):

أمثلة برمجية: الاستماع لأحداث النقر والإدخال

المثال الأول: ربط أحداث النقر وتغيير حالات المكون

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-event-binding-demo',
5	standalone: true,
6	template: `
7	<div class="counter-box">
8	<h3>العداد التفاعلي: {{ count }}</h3>
9
10	<!-- استماع لحدث النقر لزيادة العدد -->
11	<button (click)="incrementCount()">زيادة القيمة</button>
12
13	<!-- استماع لحدث النقر لتصفير العداد -->
14	<button (click)="resetCount()">إعادة ضبط</button>
15	</div>
16	`
17	})
18	export class EventBindingDemoComponent {
19	count = 0;
20
21	incrementCount() {
22	this.count += 1;
23	}
24
25	resetCount() {
26	this.count = 0;
27	}
28	}

أمثلة برمجية: التعامل مع كائن الحدث ($event) وقيم المدخلات

المثال الثاني: التقاط بيانات الكتابة عبر حدث الـ input باستخدام $event

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-user-input-demo',
5	standalone: true,
6	template: `
7	<div class="input-panel">
8	<!-- استماع لحدث الإدخال وتمرير كائن الحدث -->
9	<input type="text" (input)="updateUserName($event)" placeholder="ادخل اسمك الكامل...">
10
11	<p>النصوص المدخلة حالياً: {{ typedName }}</p>
12	</div>
13	`
14	})
15	export class UserInputDemoComponent {
16	typedName = '';
17
18	updateUserName(event: Event) {
19	// استخراج القيمة المدخلة بوضوح من عنصر الـ input المستهدف
20	const inputElement = event.target as HTMLInputElement;
21	this.typedName = inputElement.value;
22	}
23	}