أحداث DOM JavaScript: Onclick and Onload

في الأيام الأولى للإنترنت ، كانت صفحات الويب ثابتة حقًا - لم يكن هناك سوى نصوص وصور. بالتأكيد ، كانت تلك الصورة في بعض الأحيان عبارة عن صورة gif متحركة ، لكنها كانت لا تزال مجرد صورة.

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

وهناك عدد من DOM (طراز كائن المستند) الأحداث التي يمكنك الاستماع لفي جافا سكريبت، ولكن onclickو onloadهي من بين الأكثر شيوعا.

حدث Onclick

و onclickحدث في جافا سكريبت يسمح لك بتنفيذ وظيفة عند النقر فوق عنصر.

مثال

Click me  function myFunction() { alert('Button was clicked!'); } 

في المثال البسيط أعلاه ، عندما ينقر المستخدم على الزر ، سيرى تنبيهًا في متصفحه يظهر Button was clicked!.

إضافة onclickديناميكيًا

يعمل المثال أعلاه ، لكنه يعتبر ممارسة سيئة بشكل عام. بدلاً من ذلك ، من الأفضل فصل محتوى الصفحة (HTML) عن المنطق (JS).

للقيام بذلك ، onclickيمكن إضافة الحدث برمجيًا إلى أي عنصر باستخدام الكود التالي في المثال التالي:

click on this element.

const p = document.getElementById("foo"); // Find the paragraph element in the page p.onclick = showAlert; // Add onclick function to element function showAlert(event) { alert("onclick Event triggered!"); }

ملحوظة

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

في المثال أعلاه ، عندما ينقر المستخدم على paragraphالعنصر الموجود في html، سيظهر تنبيهًا onclick Event triggered.

منع الإجراء الافتراضي

ومع ذلك ، إذا قمنا بإرفاق onclickروابط ( aعلامة HTML ) ، فقد نرغب في منع حدوث الإجراء الافتراضي:

Guides  const link = document.getElementById("bar"); // Find the link element link.onclick = myAlert; // Add onclick function to element function myAlert(event) { event.preventDefault(); alert("Link was clicked but page was not open"); } 

في المثال أعلاه ، منعنا السلوك الافتراضي aللعنصر (فتح الرابط) باستخدام وظيفة رد الاتصال الخاصة event.preventDefault()بنا onclick.

حدث Onload

و onloadيستخدم الحدث لتنفيذ وظيفة جافا سكريبت على الفور بعد أن يتم تحميل الصفحة.

مثال:

const body = document.body; body.onload = myFunction; function myFunction() { alert('Page finished loading'); } 

والتي يمكن اختصارها إلى:

document.body.onload = function() { alert('Page finished loading'); } 

في المثال أعلاه ، بمجرد تحميل صفحة الويب ، myFunctionسيتم استدعاء الوظيفة ، وإظهار Page finished loadingالتنبيه للمستخدم.

و onloadعادة ما يتم إرفاق الحدث ل عنصر. ثم بمجرد تحميل الصفحة ، والتي تتضمن جميع الصور وملفات CSS و JS ، سيتم تشغيل النص البرمجي.

معلومات اكثر:

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

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