102- دروس جافا سكربت – DOM – JS DOM Events

### مقدمة إلى أحداث DOM في JavaScript

تُعتبر أحداث DOM (Document Object Model) جزءاً أساسياً ومهماً في تطوير الويب باستخدام JavaScript. تتيح لك الأحداث التفاعل مع المستخدمين من خلال الاستجابة لتصرفاتهم مثل النقر على الأزرار، تحريك المؤشر، أو إدخال البيانات في النماذج. يُعتبر فهم كيفية التعامل مع هذه الأحداث جزءاً مهماً من بناء تطبيقات ويب تفاعلية وجذابة.

### ما هو DOM؟

DOM هو واجهة برمجية تمثل المستندات في المتصفحات بشكل شجري، حيث يمكن الوصول إلى عناصر HTML والتعامل معها بواسطة البرمجيات. DOM يتيح لك الوصول إلى وتغيير بنية المستند ومحتواه.

### أنواع الأحداث في DOM

توجد العديد من الأنواع المختلفة من الأحداث التي يمكن التعامل معها في DOM. من بين الأنواع الشائعة:

1. **أحداث الفأرة (Mouse Events):**
– `click`: يحدث عندما يضغط المستخدم على زر الفأرة الأيسر.
– `dblclick`: يحدث عند النقر مرتين متتاليتين.
– `mouseover`: يحدث عندما يتحرك المؤشر فوق عنصر معين.
– `mouseout`: يحدث عندما يخرج المؤشر من عنصر معين.

2. **أحداث لوحة المفاتيح (Keyboard Events):**
– `keydown`: يحدث عند الضغط على مفتاح.
– `keyup`: يحدث عند تحرير مفتاح.
– `keypress`: يحدث عند الضغط على مفتاح ينتج عنه حرف.

3. **أحداث النماذج (Form Events):**
– `submit`: يحدث عند إرسال النموذج.
– `focus`: يحدث عندما [شركة برمجة مصرية] يتم التركيز على حقل إدخال.
– `blur`: يحدث عند فقدان [شركة برمجة مصرية] التركيز من حقل إدخال.

4. **أحداث التحميل (Load Events):**
– `load`: يحدث عند تحميل الصفحة بالكامل.
– `unload`: يحدث عند مغادرة الصفحة.

### التعامل مع الأحداث

يمكنك التعامل مع الأحداث في JavaScript باستخدام عدة طرق:

#### 1. تعيين معالج الأحداث داخل HTML

“`html
Click me
“`

#### 2. استخدام خاصية `onclick` في JavaScript

“`html
Click me

const button = document.getElementById(‘myButton’);
button.onclick = function() {
alert(‘Button clicked!’);
};

“`

#### 3. استخدام `addEventListener`

“`html
Click me

const button = document.getElementById(‘myButton’);
button.addEventListener(‘click’, function() {
alert(‘Button clicked using addEventListener!’);
});

“`

### استخدام `addEventListener`

`addEventListener` هي الطريقة الأكثر مرونة والأكثر استخدامًا لإضافة الأحداث. يتيح لك إضافة معالجي أحداث متعددين لنفس العنصر دون الكتابة فوق الآخرين. كما يدعم إزالة معالجات الأحداث باستخدام `removeEventListener`.

#### مثال على استخدام `addEventListener`

“`html

const input = document.getElementById(‘nameInput’);

input.addEventListener(‘focus’, function() {
console.log(‘Input field is focused’);
});

input.addEventListener(‘blur’, function() {
console.log(‘Input field lost focus’);
});

“`

### منع السلوك الافتراضي للأحداث

في بعض الأحيان، قد ترغب في منع السلوك الافتراضي للمتصفح عند حدوث حدث معين. يمكنك القيام بذلك باستخدام `event.preventDefault()`.

#### مثال على منع السلوك الافتراضي

“`html
Go to example.com

const link = document.getElementById(‘myLink’);

link.addEventListener(‘click’, function(event) {
event.preventDefault();
alert(‘Default action prevented, you will not be redirected!’);
});

“`

### الخاتمة

تُعتبر أحداث DOM جزءاً مهماً من تطوير تطبيقات الويب التفاعلية. من خلال فهم كيفية التعامل مع هذه الأحداث، يمكنك إنشاء تجارب مستخدم أكثر ديناميكية وجاذبية. سواء كنت تستخدم الطريقة التقليدية لتعيين الأحداث أو الطريقة الحديثة باستخدام `addEventListener`، فإن فهم كيفية عمل هذه الآليات سيمكنك من بناء تطبيقات ويب فعالة ومتجاوبة.