103- دروس جافا سكربت – DOM – JS DOM Event Listener

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

تعتبر لغة JavaScript من اللغات الأساسية لتطوير الويب، حيث تتيح للمطورين إنشاء صفحات ويب ديناميكية وتفاعلية. واحدة من أهم الميزات التي توفرها JavaScript هي القدرة على التعامل مع الأحداث بواسطة “مستمعي الأحداث” أو ما يعرف بـ Event Listeners في نموذج كائن المستند (DOM).

في هذا المقال، سنقوم بشرح مفهوم مستمعي الأحداث في DOM وكيفية استخدامها بفعالية في تطبيقات الويب.

## ما هو DOM؟

قبل أن نتعمق في مستمعي الأحداث، يجب أن نفهم ما هو DOM. DOM هو اختصار لـ Document Object Model، وهو واجهة برمجية تربط بين صفحة الويب البرمجية وهيكلها الشجري. يمكن من خلاله الوصول إلى عناصر HTML وتعديلها باستخدام JavaScript.

## ما هو مستمع الحدث (Event Listener)؟

مستمع الحدث هو دالة أو وظيفة تحدد ما يجب أن يحدث عندما يتم إطلاق حدث معين على عنصر من عناصر HTML. يمكن أن تكون هذه [شركة برمجة مصرية] الأحداث ناتجة عن تفاعل المستخدم مثل النقر على زر، أو حتى أحداث تلقائية مثل تحميل الصفحة.

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

لإضافة [شركة برمجة مصرية] مستمع حدث إلى عنصر HTML، نستخدم الطريقة `addEventListener`. هذه الطريقة تتيح لنا تحديد نوع الحدث والدالة التي سيتم استدعاؤها عند وقوع الحدث.

### الصيغة الأساسية

element.addEventListener(event, function, useCapture);

– `element`: العنصر الذي نريد إضافة مستمع الحدث له.
– `event`: نوع الحدث الذي نريد الاستماع إليه (مثل “click” أو “mouseover”).
– `function`: الدالة التي سيتم استدعاؤها عند وقوع الحدث.
– `useCapture`: (اختياري) قيمة منطقية تحدد ما إذا كان يجب استخدام مرحلة الالتقاط أم لا.

### مثال 1: مستمع حدث للنقر

“`html
انقر هنا

const button = document.getElementById(‘myButton’);
button.addEventListener(‘click’, function() {
alert(‘تم النقر على الزر!’);
});

“`

في هذا المثال، قمنا بإضافة مستمع حدث للنقر على زر. عندما ينقر المستخدم على الزر، سيتم عرض رسالة تنبيه.

### مثال 2: مستمع حدث لتحريك الفأرة

“`html

const hoverDiv = document.getElementById(‘hoverDiv’);
hoverDiv.addEventListener(‘mouseover’, function() {
hoverDiv.style.backgroundColor = ‘lightgreen’;
});
hoverDiv.addEventListener(‘mouseout’, function() {
hoverDiv.style.backgroundColor = ‘lightblue’;
});

“`

في هذا المثال، استخدمنا مستمعي حدث `mouseover` و`mouseout` لتغيير لون الخلفية عند مرور الفأرة فوق المربع وعند مغادرتها له.

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

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

### مثال على إزالة مستمع الحدث

function showAlert() {
  alert('تم النقر على الزر!');
}

button.addEventListener('click', showAlert);

// لإزالة المستمع:
button.removeEventListener('click', showAlert);

في هذا المثال، قمنا بإضافة مستمع حدث باستخدام دالة مسماة، مما يسمح لنا بإزالته لاحقًا.

## الخاتمة

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