معالجات الأحداث في JavaScript: دليل شامل للتفاعل مع DOM

مقدمة إلى معالجات الأحداث في JavaScript: فهم أعمق للتفاعل

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

عند وقوع حدث معين، يقوم المتصفح بإشعار النظام بأن شيئًا قد حدث ويتطلب معالجة. تتم هذه المعالجة عن طريق تسجيل دالة خاصة تُعرف باسم معالج الحدث (event handler)، والتي تستمع لنوع معين من الأحداث وتستجيب له.

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

مثال عملي: معالج حدث النقر (Click Event Handler)

لنلقِ نظرة على مثال بسيط يوضح كيفية استخدام معالج حدث النقر:

<div class = "buttons" >
  < button > Press 1 </ button >
  < button > Press 2 </ button >
  < button > Press 3 </ button >
</div>

const buttonContainer = document.querySelector('.buttons');
console.log('buttonContainer', buttonContainer);
buttonContainer.addEventListener('click', event => {
  console.log(event.target.value)
})

في هذا المثال، نستمع لحدث النقر على العنصر الأب (.buttons) الذي يحتوي على الأزرار. عندما ينقر المستخدم على أي زر داخل هذا العنصر، يتم تشغيل دالة معالج الحدث التي تطبع قيمة الزر المستهدف في وحدة التحكم.

أنواع الأحداث الشائعة في JavaScript

يمكن أن يتم تشغيل الحدث في أي وقت يتفاعل فيه المستخدم مع الصفحة. هذه الأحداث يمكن أن تكون تمرير المستخدم عبر الصفحة، النقر على عنصر، أو تحميل الصفحة. فيما يلي بعض الأحداث الشائعة:

• onclick: عند النقر على عنصر.
• ondblclick: عند النقر المزدوج على عنصر.
• onmousedown: عند الضغط على زر الفأرة فوق عنصر.
• onmouseup: عند تحرير زر الفأرة فوق عنصر.
• onmousemove: عند تحريك الفأرة فوق عنصر.
• onkeydown: عند الضغط على مفتاح من لوحة المفاتيح.
• onkeyup: عند تحرير مفتاح من لوحة المفاتيح.
• ontouchmove: عند تحريك إصبع المستخدم على شاشة اللمس.
• ontouchstart: عند لمس شاشة اللمس.
• ontouchend: عند رفع إصبع المستخدم عن شاشة اللمس.
• onload: عند اكتمال تحميل الصفحة أو عنصر معين.
• onfocus: عند حصول عنصر على التركيز (مثل حقل إدخال).
• onblur: عند فقدان عنصر للتركيز.
• onerror: عند حدوث خطأ أثناء تحميل ملف أو صورة.
• onscroll: عند تمرير محتوى العنصر.

مراحل انتشار الأحداث في DOM: الالتقاط والهدف والفقاعة

فهم انتشار الأحداث (Event Propagation)

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

تحدث الأحداث في مرحلتين رئيسيتين: مرحلة الالتقاط (Capturing Phase) ومرحلة الفقاعة (Bubbling Phase).

مرحلة الالتقاط (Capturing Phase)

تُعرف مرحلة الالتقاط أيضًا باسم مرحلة “التسرب” (trickling phase)، حيث “يتسرب” الحدث إلى العنصر الذي تسبب فيه. تبدأ هذه المرحلة من العنصر الجذر (root level element) ومعالجه، ثم تنتشر نزولاً إلى العنصر المستهدف. تكتمل مرحلة الالتقاط عندما يصل الحدث إلى الهدف (target) الفعلي.

مرحلة الفقاعة (Bubbling Phase)

في مرحلة الفقاعة، “يتصاعد” الحدث صعودًا في شجرة DOM. يتم التقاطه ومعالجته أولاً بواسطة المعالج الأقرب (الذي يكون الأقرب إلى العنصر الذي وقع عليه الحدث). ثم يتصاعد (أو ينتشر صعودًا) إلى المستويات الأعلى في شجرة DOM، وصولاً إلى آبائه، وأخيرًا إلى العنصر الجذر.

تذكر هذه العبارة لمساعدتك: trickle down, bubble up (يتسرب إلى الأسفل، يتصاعد إلى الأعلى).

يوضح الرسم البياني التالي من quirksmode هذه المراحل بشكل ممتاز:

 / \
---------------| |-----------------
|    element1   |
|               |
-----------| |-----------
|    element2   |
|               |
-------------------------
|    Event BUBBLING     |
-----------------------------------

-----------------------------------
|    Event CAPTURING    |
-------------------------
|               |
-----------| |-----------
|    element2   |
|               |
---------------| |-----------------
|    element1   |
\ /

من المهم ملاحظة أنه بغض النظر عن المرحلة التي تسجل فيها معالج الحدث، فإن كلتا المرحلتين تحدثان دائمًا. جميع الأحداث تتصاعد افتراضيًا (bubble by default). يمكنك تسجيل معالجات الأحداث لأي من المرحلتين، الفقاعة أو الالتقاط، باستخدام الدالة addEventListener(type, listener, useCapture). إذا تم تعيين useCapture على false، فسيكون معالج الحدث في مرحلة الفقاعة. وإلا، فسيكون في مرحلة الالتقاط.

اختبار ترتيب مراحل الالتقاط في المتصفحات

يعتمد ترتيب مراحل الحدث على المتصفح. للتحقق من المتصفح الذي يعالج مرحلة الالتقاط أولاً، يمكنك تجربة الكود التالي في JSFiddle:

 < div id = "child-one" >
 < h1 > Child One </ h1 >
 </ div >

 const childOne = document.getElementById("child-one");
 const childOneHandler = () => {
   console.log('Captured on child one')
 }
 const childOneHandlerCatch = () => {
   console.log('Captured on child one in capture phase')
 }
 childOne.addEventListener("click", childOneHandler);
 childOne.addEventListener("click", childOneHandlerCatch, true);

في متصفحات Firefox وSafari وChrome، يكون الناتج كالتالي:

كيفية الاستماع إلى الأحداث في JavaScript

هناك طريقتان رئيسيتان للاستماع إلى حدث:

الطريقة الأولى: استخدام addEventListener

تُعد الدالة addEventListener() الطريقة المفضلة والحديثة لتسجيل معالجات الأحداث. تسمح لك بإرفاق دالة معالج حدث مع عنصر معين.

document.querySelector('a').addEventListener('click', onClickHandler);

الطريقة الثانية: الأحداث المضمنة (Inline Events)

يمكنك أيضًا تحديد معالج حدث مباشرة كسمة HTML، مثل onclick. ومع ذلك، لا يُنصح بهذه الطريقة في التطبيقات الحديثة بسبب فصل الاهتمامات وصعوبة الصيانة.

<button onclick="myFunction()">Click me</button>

مقارنة بين addEventListener والأحداث المضمنة: أيهما أفضل؟

عند المقارنة بين addEventListener() والأحداث المضمنة (مثل onclick)، تبرز addEventListener() كخيار أفضل للتطوير الحديث لعدة أسباب:

• مرونة غير محدودة: تمنحك addEventListener() القدرة على تسجيل عدد غير محدود من معالجات الأحداث لنفس الحدث على نفس العنصر، بينما تسمح الأحداث المضمنة بتسجيل معالج واحد فقط.
• إزالة المعالجات بسهولة: يمكن استخدام removeEventListener() لإزالة معالجات الأحداث المسجلة، مما يوفر تحكمًا أكبر في سلوك التطبيق.
• التحكم في مراحل الحدث: يمكن استخدام العلامة useCapture في addEventListener() لتحديد ما إذا كان يجب معالجة الحدث في مرحلة الالتقاط أو مرحلة الفقاعة، مما يمنحك تحكمًا دقيقًا في كيفية انتشار الأحداث.
• فصل الاهتمامات: تفصل addEventListener() شيفرة JavaScript عن HTML، مما يجعل الكود أنظف وأسهل في القراءة والصيانة.

أمثلة عملية وشفرات حية لتجربة الأحداث

يمكنك تجربة هذه الأحداث في JSFiddle لتفهم كيفية عملها بشكل أفضل.

 <div id="wrapper-div">
  <div id="child-one">
  <h1> Child One </h1>
  </div>
  <div id="child-two" onclick="childTwoHandler()">
  <h1> Child Two </h1>
  </div>
 </div>

 const wrapperDiv = document.getElementById("wrapper-div");
 const childOne = document.getElementById("child-one");
 const childTwo = document.getElementById("child-two");

 const childOneHandler = () => {
   console.log('Captured on child one - Bubbling')
 }
 const childTwoHandler = () => {
   console.log('Captured on child two - Bubbling')
 }
 const wrapperDivHandler = () => {
   console.log('Captured on wrapper div - Bubbling')
 }

 const childOneHandlerCatch = () => {
   console.log('Captured on child one in capture phase')
 }
 const childTwoHandlerCatch = () => {
   console.log('Captured on child two in capture phase')
 }
 const wrapperDivHandlerCatch = () => {
   console.log('Captured on wrapper div in capture phase')
 }

 childOne.addEventListener("click", childOneHandler);
 childTwo.addEventListener("click", childTwoHandler);
 wrapperDiv.addEventListener("click", wrapperDivHandler);

 childOne.addEventListener("click", childOneHandlerCatch, true);
 childTwo.addEventListener("click", childTwoHandlerCatch, true);
 wrapperDiv.addEventListener("click", wrapperDivHandlerCatch, true);

الخلاصة الموجزة

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

الخلاصة التقنية

تُشكل معالجة الأحداث حجر الزاوية في بناء تطبيقات الويب التفاعلية والديناميكية. إن فهم آلياتها، خاصةً مراحل الالتقاط والفقاعة، أمر حيوي للمطورين لتجنب السلوكيات غير المتوقعة وتحسين أداء التطبيق. بينما قد تبدو الأحداث المضمنة (inline events) سهلة الاستخدام للمبتدئين أو في الأمثلة البسيطة، فإن التوجه الحديث والمعيار الصناعي يدعو بقوة إلى استخدام addEventListener(). فهي لا توفر فقط مرونة أكبر في إدارة معالجات الأحداث وإزالتها، بل تعزز أيضًا مبدأ فصل الاهتمامات (separation of concerns) بين هيكل HTML وسلوك JavaScript، مما يؤدي إلى كود أنظف، أسهل في الصيانة، وأكثر قابلية للتوسع. إن إتقان addEventListener() والتحكم في علامة useCapture يمنح المطور القدرة على بناء تجارب مستخدم غنية وموثوقة.