.addEventListener()
تُستخدم طريقة .addEventListener() لإرفاق معالج حدث لحدث معين على هدف الحدث. تتمثل ميزة هذه الطريقة في أنه يمكنك إضافة العديد من الأحداث إلى هدف الحدث دون الكتابة فوق الأحداث الموجودة. يتم تمرير وسيطين إلى هذه الطريقة: اسم الحدث كسلسلة نصية، ودالة معالج الحدث. هنا الصيغة:
eventTarget.addEventListener("event", eventHandlerFunction);.removeEventListener()
يمكننا إخبار الكود بالاستماع إلى حدوث حدث معين باستخدام طريقة .addEventListener(). لإخبار الكود بالتوقف عن الاستماع لهذا الحدث، يمكننا استخدام طريقة .removeEventListener(). تأخذ هذه الطريقة نفس الوسيطين الذين تم تمريرهما إلى .addEventListener(): اسم الحدث كسلسلة نصية ودالة معالج الحدث. هنا الصيغة:
eventTarget.addEventListener("event", eventHandlerFunction);
eventTarget.removeEventListener("event", eventHandlerFunction);معالج الحدث
عندما يحدث حدث في JavaScript (مثل ضغطة مفتاح أو حركة الماوس)، يتم تشغيل معالج الحدث استجابةً لذلك. يتم تسجيل كل معالج حدث لعنصر، مما يربط المعالج بكل من العنصر ونوع الحدث (مثل ضغطة المفتاح). يستمع مستمع الحدث (event listener) لحدوث حدث، يحدد ما يجب أن يحدث كاستجابة، ويستدعي معالج الحدث.
كائن الحدث
تُمرر دوال معالجات الحدث وسيطًا يُسمى كائن الحدث، الذي يحمل معلومات حول الحدث الذي تم تفعيله.
تخزن كائنات الحدث معلومات حول هدف الحدث، نوع الحدث، والمستمعين المرتبطين في خصائص وأساليب. على سبيل المثال، إذا أردنا معرفة أي مفتاح تم ضغطه، فسيخزن كائن الحدث تلك المعلومات.
أحداث لوحة المفاتيح
تصف أحداث لوحة المفاتيح تفاعل المستخدم مع لوحة المفاتيح. يصف كل حدث تفاعلًا منفصلًا مع مفتاح على لوحة المفاتيح بواسطة المستخدم، والتي تُخزن بعد ذلك باستخدام خاصية .key.
- يتم تفعيل أحداث keydown عندما يتم الضغط على المفتاح لأول مرة.
- يتم تفعيل أحداث keyup عندما يتم تحرير المفتاح.
- يتم تفعيل أحداث keypress عندما يضغط المستخدم على مفتاح يُنتج قيمة حرفية (مثلًا ليس مفتاح تعديل مثل CapsLock).
حدث JavaScript
على صفحة ويب، يمكن أن يتسبب مسبب مثل تفاعل المستخدم أو تلاعب المتصفح في إنشاء حدث JavaScript من جانب العميل. يمكن استخدام الأحداث للتلاعب بـ DOM من خلال تنفيذ دالة JavaScript.
يمكن أن تتضمن الأحداث أي شيء من نقرة إلى تحويم الماوس فوق عنصر إلى تحميل صفحة ويب أو تحديثها. تُعرف الأحداث كجزء من واجهة برمجة التطبيقات (API) لـ JavaScript المدمجة في المتصفح.
// يتم تفعيل حدث عندما ينقر المستخدم على العنصر #button،
// الذي يضبط بعد ذلك لون الخلفية للعنصر #button إلى الأزرق.
$('#button').on('click', event => {
$(event.currentTarget).css('background-color', 'blue');
});معالجات أحداث JavaScript
الهدف من JavaScript هو جعل الصفحة ديناميكية، مما يعني غالبًا الاستجابة لأحداث معينة (مثل نقرات الأزرار، تمريرات المستخدم، إلخ). يمكن لعناصر DOM أن تحتوي على دوال تُعلق على الأحداث. تُعرف هذه الدوال بمعالجات الأحداث، والعنصر DOM يعرف باسم هدف الحدث.
يعرض مثال الكود كيفية تسجيل دالة كمعالج حدث. يبدأ اسم الخاصية لمعالجات الأحداث بـ ‘on’ مع الحدث المرفق بعده. أمثلة: onload، onclick، onfocus، onscroll.
// بافتراض وجود عنصر بالمعرف 'test' في الصفحة
document.getElementById('test').onclick = function(e) {
alert('Element clicked!');
};أحداث الفأرة
يتم تفعيل حدث الفأرة عندما يتفاعل المستخدم مع الفأرة، سواء بالنقر أو بتحريك جهاز الفأرة.
- يتم تفعيل أحداث click عندما يضغط المستخدم ويحرر زر الفأرة على عنصر.
- يتم تفعيل أحداث mouseout عندما يغادر الماوس عنصرًا.
- يتم تفعيل أحداث mouseover عندما يدخل الماوس محتوى عنصر.
- يتم تفعيل أحداث mousedown عندما يضغط المستخدم على زر الفأرة.
- يتم تفعيل أحداث mouseup عندما يحرر المستخدم زر الفأرة.