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

بعض الأمثلة على أحداث DOM هي عندما ينقر المستخدم بالماوس، وعندما يتم تحميل صفحة ويب، وعندما يتم تحميل صورة، وعندما يتم إرسال نموذج HTML، وعندما يضغط المستخدم على مفتاح.

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

1.addEventListener

addEventListener، يربط معالج الأحداث بالعناصر، ويسمح لك بتحديد كيفية تفاعل العنصر مع تفاعل المستخدمين مع الصفحة.

مثال: يضيف الكود أدناه حدث "نقر" لعرض تفاصيل الكوكتيلات عند النقر على الصورة.

`img.addEventListener('click', () => handleClick(cocktail));`

2.querySelector

querySelector، يسمح لك بتحديد عنصر باستخدام محددات تشبه CSS. إنها واحدة من أكثر الطرق تنوعًا لاستهداف العناصر.

مثال: يقوم هذا الكود بإنشاء قسم قابل للطي على صفحة الويب. يقوم document.querySelectorAll بتحديد كافة عناصر h3 على صفحة الويب ويقوم بإرجاع NodeList لجميع العناصر المطابقة.

const setupCollapsibles = () => {
  const collapsibles = document.querySelectorAll('.collapsible h3');

3. getElementById و getElementsByClassName

يستهدف getElementById عنصرًا واحدًا بمعرفه الفريد.

وبالمثل، يقوم getElementsByClassName بتحديد كافة العناصر ذات فئة معينة وإرجاعها كمجموعة.

مثال: أدناه، يبحث getElementById عن عنصر حسب سمة المعرف الخاص به في مستند HTML.

يتم استخدامه هنا للوصول إلى مدخلات النموذج المحددة، والاسم الجديد، والمكونات الجديدة، والصورة الجديدة، والوصفة الجديدة واسترداد قيمها.

يتم بعد ذلك تخزين هذه القيم في خصائص كائن newCocktail الذي تم تعريفه باستخدام const.

بهذه الطريقة، عندما يرسل المستخدم نموذجًا لإنشاء كوكتيل جديد، يتم تخزينه بطريقة منظمة داخل كائن newCocktail.

const newCocktail = {
      name: document.getElementById('new-name').value,
      ingredients: document.getElementById('new-ingredients').value.split(', '),
      image: document.getElementById('new-image').value,
      recipe: document.getElementById('new-recipe').value,
    }; 

4. DOMContentLoaded

يضمن حدث DOMContentLoaded تشغيل JavaScript فقط بعد تحميل DOM بالكامل، مما يمنع الأخطاء من محاولة الوصول إلى العناصر قبل أن تصبح متاحة.

مثال: DOMContentLoaded، هو حدث يتم إطلاقه عندما يتم تحميل مستند HTML الأولي وتحليله بالكامل، دون انتظار تحميل أوراق الأنماط أو الصور أو الموارد الخارجية الأخرى بالكامل.

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

في الكود أدناه، يخبرك المتصفح أن المستند متاح الآن ويمكن للمستخدم البدء في التفاعل معه.

document.addEventListener('DOMContentLoaded', () => {
  setupEditListener();
  setupDeleteListener();
});

الملاحظات النهائية

تعد أحداث DOM أساسية في جعل صفحة الويب تفاعلية وجذابة للمستخدمين. من خلال فهم واستخدام الأساليب الأساسية مثل addEventListener وquerySelector وgetElementById وgetElementsByClassName، يمكنك إنشاء واجهات مستخدم ديناميكية تستجيب للنقرات وعمليات إرسال النماذج والمزيد.

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

باختصار، تتيح لك أحداث DOM:

• قم بإرفاق معالجات الأحداث باستخدام addEventListener للتفاعل التفاعلي.

• حدد العناصر باستخدام querySelector أو getElementById لتحديث المحتوى ديناميكيًا.

• إدارة الإجراءات الناجمة عن الحدث بناءً على مدخلات المستخدم، مثل عمليات إرسال النماذج.

• تأكد من تشغيل البرامج النصية الخاصة بك في الوقت المناسب باستخدام DOMContentLoaded.

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