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

**الأحداث في جافاسكريبت (JS Events): شرح مفصل**

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

### مفهوم الأحداث في جافاسكريبت

الأحداث ببساطة هي مجموعة من الإجراءات التي يمكن للمتصفح التعرف عليها والاستجابة لها. يمكن ربط الأحداث بعناصر HTML بحيث يتم تنفيذ كود جافاسكريبت معين عند وقوع الحدث.

### أنواع الأحداث الشائعة

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

2. **أحداث [شركة برمجة مصرية] لوحة المفاتيح (Keyboard Events):**
– `keydown`: يحدث عند الضغط على مفتاح.
– `keyup`: يحدث عند إفلات مفتاح مضغوط.
– `keypress`: يحدث عندما يتم الضغط على مفتاح ويتكرر طالما كان المفتاح مضغوطًا.

3. **أحداث النماذج (Form Events):**
– `submit`: يحدث عند إرسال نموذج.
– `change`: يحدث عند تغيير قيمة عنصر في النموذج.
– `focus`: يحدث عندما يكون عنصر النموذج في حالة التركيز.

4. **أحداث المستند (Document Events):**
– `DOMContentLoaded`: يحدث عندما يتم تحميل محتوى DOM بالكامل.
– `load`: يحدث عندما يتم تحميل الصفحة بالكامل بما في ذلك الصور والأنماط.

### كيفية التعامل مع الأحداث

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

1. **مستمعو الأحداث (Event Listeners):**

تُعتبر هذه الطريقة الأحدث والأكثر استخدامًا، حيث يتم استخدام `addEventListener` لإرفاق مستمع حدث بعنصر HTML.

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button was clicked!');
});

2. **الخاصية الحدثية (Inline Event Handlers):**

يمكن تضمين التعامل مع الأحداث مباشرة في HTML باستخدام سمات مثل `onclick`.

“`html
Click Me!
“`

3. **خصائص DOM الحدثية (DOM Event Properties):**

يمكن تعيين دوال [شركة برمجة مصرية] جافاسكريبت كقيم لخصائص الحدث لعناصر DOM.

var button = document.getElementById('myButton');
button.onclick = function() {
    alert('Button was clicked!');
};

### أمثلة متعددة

#### مثال 1: تغيير اللون عند النقر

“`html
Change Color

document.getElementById(‘colorButton’).addEventListener(‘click’, function() {
document.body.style.backgroundColor = ‘lightblue’;
});

“`

#### مثال 2: إظهار نص عند التركيز على حقل إدخال

“`html

You focused on the input!

document.getElementById(‘inputField’).addEventListener(‘focus’, function() {
document.getElementById(‘message’).style.display = ‘block’;
});

“`

#### مثال 3: عداد النقرات

“`html
Click me

Click Count: 0

var count = 0;
document.getElementById(‘counterButton’).addEventListener(‘click’, function() {
count++;
document.getElementById(‘clickCount’).textContent = count;
});

“`

### الخاتمة

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