شرح مفصل لكتابة الأحداث المخصصة في جافا سكريبت

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

وظائف مع الأحداث المخصصة هي الحدث ، customevent ، و dispatchevent.

تخصيص الأحداث مباشرة ، باستخدام مُنشئ الحدث:

 var event = حدث جديد ('Build') ؛ // استمع إلى Event.Elem.AdDeventListener ('Build' ، function (e) {...} ، false) ؛ // dispatch the event.elem.dispatchevent (event) ؛

يمكن لـ Customevent إنشاء حدث أكثر تخصيصًا ، ويمكن أيضًا أن يرافقه بعض البيانات. الاستخدام المحدد هو كما يلي:

 var myevent = customevent new (eventName ، Options) ؛

حيث يمكن أن تكون الخيارات:

 {التفاصيل: {...} ، الفقاعات: صواب ، قابل للإلغاء: خطأ}

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

سيتم تشغيل الأحداث المدمجة بواسطة المتصفح وفقًا لبعض العمليات ، وسيحتاج الأحداث المخصصة إلى إطلاقها يدويًا. يتم استخدام وظيفة الإرسال لتشغيل حدث ما:

 element.dispatchevent (customevent) ؛

يشير الرمز أعلاه إلى أن حدث CustomeVent يتم تشغيله على العنصر. معا ، استخدمه:

 // أضف مستمعًا مناسبًا للمناسبة.

استخدم الأحداث المخصصة للانتباه إلى مشكلات التوافق ، ولكن استخدام jQuery أبسط بكثير:

 // BIND CUSTOM EVENT $ (element) .on ('myCustomevent' ، function () {}) ؛ // trigger event $ (element) .trigger ('myCustomevent') ؛ بالإضافة إلى ذلك ، يمكنك تمرير المزيد من معلومات المعلمة عند تشغيل حدث مخصص: $ ("P") .on ("myCustomevent" ، الوظيفة (الحدث ، myName) {$ (this) .Text (myName + "، مرحبًا بكم!

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

 <div id = "testbox"> </viv> // إنشاء حدث var evt = document.createevent ('event') ؛ // تحديد نوع الحدث evt.initevent ('customevent' ، true ، true) ؛ // الاستماع نشأ ') ؛} ، خطأ) ؛

لتأثيرات محددة ، يمكنك التحقق من العرض التوضيحي. أدخل OBJ.Dispatchevent (EVT) في وحدة التحكم. يمكنك أن ترى أن "حدث Customevent الذي تم تشغيله" في وحدة التحكم ، مما يشير إلى أن الحدث المخصص قد تم تشغيله بنجاح.

في هذه العملية ، تقوم طريقة CreateEvent بإنشاء حدث فارغ EVT ، ثم تستخدم طريقة Initevent لتحديد نوع الحدث كحدث مخصص متفق عليه ، ثم يستمع إلى العنصر المقابل. ثم ، استخدم الإرسال لإطلاق الحدث.

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

بالطبع ، ربما تكون قد خمنت أن الكود أعلاه لا يسري في إصدارات أقل من IE. في الواقع ، لا يتم دعم CreateEvent () في إصدارات IE8 وأسفل من IE ، ولكن هناك طريقة FireEvent () الخاصة بـ IE ، ولكن للأسف ، يدعم Fireevent فقط تشغيل الأحداث القياسية. لذلك ، لا يمكننا استخدام طريقة خاصة وبسيطة إلا لإحداث حدث مخصص.

 // type هو حدث مخصص ، مثل type = 'customevent' ، رد الاتصال هو وظيفة رد الاتصال المحددة فعليًا بواسطة المطور OBJ [type] = 0 ؛ obj [type] ++ ؛ obj.attachevent ('OnPropertyChange' ، function (event) {if (event.propertyName == type) {callback.call (obj) ؛}}) ؛

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

من أجل تمكين آلية الأحداث المخصصة للتعاون مع الاستماع والمحاكاة للأحداث القياسية ، يتم تقديم آلية حدث كاملة هنا. تدعم هذه الآلية مراقبة الأحداث القياسية والأحداث المخصصة ، وتزيل عمليات الاستماع والمحاكاة. تجدر الإشارة إلى أنه من أجل توضيح منطق الكود أكثر وضوحًا ، تم الاتفاق على أن الأحداث المخصصة لها بادئة "مخصصة" (على سبيل المثال: CustomTest ، CustomAlert).

 / *** description يحتوي على الحدث الاستماع ، الإزالة والمحاكاة حدث ، مكالمات السلسلة الداعمة**/ (الدالة (نافذة ، غير محدد) {var ev = window.ev. == 1)؟ _That.Element.addeventListener (النوع ، رد الاتصال ، خطأ) ؛ } vnev = event) {event = event؟ ! إرجاع _ that ؛ _That.Element.RemoveEventListener (النوع ، رد الاتصال ، خطأ) ؛ _THAT.ELEMENT.DETACHEVENT ('ONPROPERTYCHANGE' ، _THAT.ELEMENT / *** suported للآخرين* / _ that.element [on ' + type] = null ؛ if (that.element.dispatchevent) {// إنشاء var evt = document.createvent ('event') ؛ type.indexof ('custom')! حالة الاختبار 1 (اختبار الحدث المخصص) // Test Case 1 (اختبار الحدث المخصص) // إدخال آلية الحدث // .../ catch domvar testbox = document.getElementById ('testbox') ؛ // وظيفة رد الاتصال 1function triggervent () {console.log ('triggered a action customconsole') ؛ console.log ("توجيهات مخصصة للحدث المخصص") ؛} // testbox testbox = $ (testbox) ؛ // ربط وظيفتين رد اتصال في نفس الوقت ، ودعم استدعاء سلسلة testbox.add ('customConsole' ، triggerevent) .add ('customconsole' ، triggeragain) ؛

الرمز الكامل في العرض التوضيحي.

بعد فتح العرض التوضيحي ، Call testbox.trigger ('customConsole') في وحدة التحكم لتشغيل الحدث المخصص بنفسه. يمكنك أن ترى أن وحدة التحكم تخرج مطالبين ، ثم إدخال testbox.remove ('customConsole' ، triggeragain) لإزالة المستمع التالي. في هذا الوقت ، استخدم testbox.trigger ('customConsole') لتشغيل الحدث المخصص. يمكنك أن ترى أن وحدة التحكم تخرج موجهًا واحدًا فقط ، أي أن المستمع التالي قد تمت إزالة المستمع التالي. جميع وظائف آلية الحدث تعمل بشكل طبيعي.