ما هي الأحداث في JavaScript وكيف يتم التعامل معها؟



توفر الأحداث في JavaScript واجهة ديناميكية لصفحة ويب. ترتبط هذه الأحداث بعناصر في نموذج كائن المستند (DOM).

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

ما هي الأحداث في JavaScript؟

تحتوي Javascript على أحداث توفر واجهة ديناميكية لصفحة ويب. ترتبط هذه الأحداث بالعناصر الموجودة في طراز كائن المستند (حكم).





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

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

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



  • عند النقر
  • عند الضغط
  • على الفأرة فوق
  • تفريغ
  • مركز

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

حدث Onclick

حدث Onclick هو حدث ماوس ويثير أي منطق محدد إذا نقر المستخدم على العنصر المرتبط به. لنأخذ مثالاً ونرى كيف يعمل:

function edu () {alert ('Welcome to Edureka!')} انقر فوق الزر

انتاج:



المخرج 1 - الأحداث في جافا سكريبت - edureka

بعد النقر فوق الزر ، تتلقى رسالة التنبيه التالية:

حدث Onekeyup

هذا الحدث هو حدث لوحة مفاتيح ويتم استخدامه لتنفيذ التعليمات كلما تم تحرير مفتاح بعد الضغط عليه. يوضح المثال التالي عمل الحدث:

var a = 0 var b = 0 var c = 0 function changeBackground () {var x = document.getElementById ('bg') bg.style.backgroundColor = 'rgb (' + a + '،' + b + '،' + c + ')' a + = 1 b + = a + 1 c + = b + 1 if (a> 255) a = a - b if (b> 255) b = a if (c> 255) c = b}

انتاج:

بعد كتابة شيء ما ، يبدو كالتالي:

حدث Onmouseover

يتوافق حدث onmouseover في JavaScript مع تحريك مؤشر الماوس فوق العنصر وتوابعه المرتبط به. المثال موضح أدناه:

الوظيفة hov () {var e = document.getElementById ('hover') e.style.display = 'none'}

انتاج:

يظهر المربع الملون قبل تحريك الماوس. بمجرد تحريك الماوس فوق المربع ، يختفي.

حدث Onload

يتم استدعاء حدث onload عند تحميل عنصر بالكامل. لنأخذ مثالاً ونرى كيف يعمل:

  ايدو الشعار 

انتاج:

حدث Onfocus

يحتوي حدث Onfocus على قائمة بالعناصر التي تنفذ التعليمات كلما تلقى التركيز. يوضح المثال التالي كيفية عمل حدث onfocus:

الوظيفة المركزة () {var e = document.getElementById ('input') if (Confirm ('Focus Event')) {e.blur ()}}

التركيز في مربع الإدخال:

انتاج:

فيبوناتشي التكراري c ++

هذه بعض الأحداث الأكثر استخدامًا في JavaScript. بهذا نكون قد وصلنا إلى نهاية مقالتنا. أتمنى أن تكون قد فهمت ما هي الأحداث وكيف يتم استخدامها.

تحقق من الذي يأتي مع تدريب مباشر بقيادة مدرب وخبرة مشروع واقعية. يجعلك هذا التدريب بارعًا في مهارات العمل باستخدام تقنيات الويب الخلفية والأمامية. يتضمن التدريب على تطوير الويب ، jQuery ، Angular ، NodeJS ، ExpressJS ، و MongoDB.

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في هذه المدونة وسنعاود الاتصال بك.