معالجة أحداث JavaScript: فهم عميق لـ لا يمكن فصل تطبيقات ويب العميل الفعالة عن آلية معالجة الأحداث JavaScript. تتيح الأحداث أن تسمح JavaScript باكتشاف سلوك المستخدم ، مثل تحوم الماوس ، والنقر على الروابط ، والتمرير للصفحة ، وتغيير حجم النوافذ ، وسحب الكائنات ، وما إلى ذلك. يمكن لبرنامج JavaScript الخاص بك تسجيل معالج أحداث يدور عند حدوث حدث محدد. ستقوم معظم المتصفحات بتمرير كائن واحد يحتوي على معلومات الحدث إلى الوظيفة ، مثل المعلومات الرئيسية ، وموضع مؤشر الماوس ، وما إلى ذلك. يمكنك بعد ذلك القيام ببعض الإجراءات مثل عناصر الرسوم المتحركة ، أو بدء طلب AJAX ، أو منع السلوك الافتراضي للمتصفح. بالإضافة إلى ذلك ، يمكن أيضًا تعيين

أيضًا. عادةً ما يشير هذا إلى العنصر الذي يؤدي إلى حدوث الحدث ، لكن هذا ليس هو الحال دائمًا.

]] مضمّنة معالجات الأحداث (على سبيل المثال

انقر لي ] بسيطة ، ولكن لديهم العديد من العيوب: فهي مقيدة للغاية ، خرقاء ويمكن أن تنفخ كود HTML. نظرًا لأن مكالمات الأحداث والمعالج محددة في مواقع مختلفة ، فمن المعقد في الحفاظ عليها. أخيرًا ، نظرًا لأنه قد يتم استدعاء الأحداث عند تحميل الصفحة ، يجب وضع علامات البرنامج النصي في الجزء العلوي من HTML ، وليس في الأسفل. حدث DOM0 التقليدي

] أساليب معالجة الأحداث التقليدية (على سبيل المثال ، link.onclick = eventHandler ؛

link.onclick = eventHandler () ؛ ، سيؤدي ذلك على الفور إلى تنفيذ الدالة لن يبلغ هذا عن خطأ ، ولكن لن يتم استدعاء معالجك أبدًا عند حدوث حدث النقر. أحداث DOM2 الحديثة ] تتيح معالجة الأحداث الحديثة تحديد معالجات متعددة لنفس الحدث. ومع ذلك ، نظرًا لبعض الاختلافات في التنفيذ بين Microsoft و W3C ، فقط IE9 وما فوق الدعم addeventListener () . يمكننا استخدام الكشف عن الكائنات لإنشاء حدث إضافي للمتصفح:

anclesevent (رابط ، "انقر" ، EventHandler) ؛ مرفق الوظيفة (العنصر ، النوع ، المعالج) { if (element.addeventListener) element.addeventListener (النوع ، معالج ، خطأ) ؛ Else element.attachevent ("On" type ، Handler) ؛ } على غرار حدث DOM0 ، تم تعيين جميع المتصفحات

كعنصر يثير الحدث ... باستثناء IE8 وأقل. في IE8 و أدناه ، هذا هو دائمًا كائن عالمي

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on"   type, handler);
}

وظيفة EventHandler (e) { e = e || window.event ؛ var target = e.target || E.Srcelement ؛ console.log (الهدف) ؛ } معنى الكلمة الرئيسية هذا في معالج أحداث JavaScript

function EventHandler(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
}

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

في معالج الأحداث استخدام هذا

هذا يشير إلى عنصر HTML في معالج الحدث المرفق. أنواع الأحداث المختلفة في JavaScript

يدعم javaScript أحداث متعددة مثل انقر فوق ، mouseover

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