خلفية
هناك العديد من المشكلات البسيطة عند ربط أحداث الربط باستخدام AddeventListener () أو anclesevent () في JavaScript:
1.
نسخة الكود كما يلي: var obtn = document.getElementById ('btn') ؛
OBTN.AdDeventListener ("Click" ، Function () {
تنبيه (يتم النقر على "الزر")
}،خطأ شنيع)
Obtn.ReomveEventListener ('click' ، function () {
تنبيه (يتم النقر على "الزر")
}،خطأ شنيع)
// لا يمكن إزالة الحدث الموجود على OBTN لأنه يتم تمرير وظيفة مجهولة
2. في IE6-II8 ، يتم تحديد مشكلة تنفيذ الطلب العكسي للأحداث المتعددة باستخدام Attannevent ().
نسخة الكود كما يلي:
var obtn = document.getElementById ('btn') ؛
Obtn.attachevent ('onclick' ، function () {
تنبيه (1)
})
Obtn.attachevent ('onclick' ، function () {
تنبيه (2)
})
Obtn.attachevent ('onclick' ، function () {
تنبيه (3)
})
// eie9+ أمر التنفيذ 1 ، 2 ، 3
// أوامر التنفيذ بموجب IE6-IE8 3 ، 2 ، 1
حل المشكلة
أرغب في كتابة وحدة ربط حدث في المستعرض المتقاطع بحيث يمكن إعادة استخدامها لاحقًا ، وفي نفس الوقت أريد حل مشكلة الاستئناف. يستخدم jQuery قوائم قوائم الانتظار وآليات تخزين البيانات لحل هذه المشكلة. نظرت إلى رمز المصدر ذي الصلة. كان معقدا حقا. جربت بعض الأساليب بنفسي وبالكاد نفذتها. يتم نشر الكود في موجه نحو الكائن ، ولا أريد أن يرى الناس ذلك بشكل معقد ، لذلك أقوم بتغييره إلى وظائف لتنظيمه.
نسخة الكود كما يلي:
/*واجهة الحدث الربط
*
*@param {dom-dom} و {type-string} و {fn-function} المعلمات الاختيارية {fnname-string}
*@تنفيذ إنشاء قائمة انتظار حدث وإضافتها إلى خصائص كائن DOM.
أضف معالج الأحداث (وظيفة) إلى قائمة انتظار الحدث
يمكن إضافة معرف إلى معالج الأحداث لحذف معالج الأحداث المحدد
*/
دالة ربط (dom ، type ، fn ، fnname) {
dom.eventqueue = dom.eventqueue || {} ؛
dom.eventqueue [type] = dom.eventqueue [type] || {} ؛
dom.handler = dom.handler || {} ؛
إذا (! fnname) {
var index = queuelength (dom ، type) ؛
dom.eventqueue [type] ['fnqueue'+index] = fn ؛
}
آخر {
dom.eventqueue [type] [fnname] = fn ؛
} ؛
if (! dom.handler [type]) bindEvent (dom ، type) ؛
} ؛
/*حدث التجليد
*
*@param {dom-dom} و {type-string}
*@تنفيذ الأحداث ملزمة مرة واحدة فقط ، يتم استخدام المعالج لاجتياز معالجات الأحداث (وظائف) في قائمة انتظار حدث التنفيذ
*@Caller Bind ()
*/
وظيفة bindevent (dom ، type) {
dom.handler [type] = function () {
لـ (var guid in dom.eventqueue [type]) {
Dom.EventQueue [type] [GUID] .Call (DOM) ؛
}
} ؛
if (window.adDeventListener) {
dom.addeventListener (type ، dom.handler [type] ، false) ؛
}
آخر {
dom.attachevent ('on'+type ، dom.handler [type]) ؛
} ؛
} ؛
/*قم بإزالة الواجهة للحدث
*
*@param {dom-dom} و {type-string} المعلمات الاختيارية {fnname-function}
*@تنفيذ إذا لم يكن هناك معرف ، قم بتنفيذ UnlindEvent ()
إذا كان هناك معرف ، يتم حذف معالج الأحداث المحدد. إذا كان طول قائمة انتظار الحدث 0 ، يتم تنفيذ UnlindEvent ().
*/
وظيفة unfind (dom ، type ، fnname) {
var hasqueue = dom.eventqueue && dom.eventqueue [type] ؛
إذا (! hasqueue) العودة ؛
إذا (! fnname) {
Undindevent (دوم ، النوع)
}
آخر {
حذف dom.eventqueue [type] [fnname] ؛
if (queuelength (dom ، type) == 0) UnlindEvent (dom ، type) ؛
} ؛
} ؛
/*إزالة الحدث
*
*@param {dom-dom} و {type-string}
*@Execute يزيل معالج الأحداث المربوطة ويمسح قائمة انتظار الحدث
*@Caller Unfind ()
*/
وظيفة unfindevent (dom ، type) {
if (window.removeeventListener) {
Dom.RemoveVentListener (النوع ، dom.handler [type])
}
آخر {
Dom.Detachevent (النوع ، dom.handler [type])
}
حذف dom.eventqueue [type] ؛
} ؛
/*قاضي طول قائمة انتظار الحدث
*
*@param {dom-dom} و {type-string}
*@Caller BIND () UNFIND ()
*/
وظيفة queuelength (dom ، type) {
فارس فهرس = 0 ؛
لـ (طول var في dom.eventqueue [type]) {
فهرس ++ ؛
}
فهرس العودة ؛
} ؛
كيفية استخدام
نسخة الكود كما يلي:
var obtn = document.getElementById ('btn') ؛
// الحدث الملزم
// ربط ثلاث نقرات من الأحداث في نفس الوقت للزر
// لا يزال أمر التنفيذ بموجب IE6-IE8 لم يتغير
BIND (OBTN ، "Click" ، Function () {
تنبيه (1) ؛
})
BIND (OBTN ، "Click" ، Function () {
تنبيه (2) ؛
} ، 'myfn')
BIND (OBTN ، "Click" ، Function () {
تنبيه (3) ؛
})
// إزالة الحدث
// قم بإزالة جميع وظائف حدث النقر المربوطة ، ودعم إزالة الوظائف المجهولة
Unfind (Obtn ، "انقر")
// إزالة وظائف الحدث فقط مع معرف myfn
Unfind (Obtn ، "انقر" ، "myfn")
أفكار البرنامج
تتمثل الفكرة الرئيسية للبرنامج في إضافة قائمة انتظار الحدث كسممة لكائن عنصر DOM إلى عنصر DOM دون تلوث البيئة العالمية. يمكن أن يحل هذا مشكلة تخزين البيانات لوظائف الأحداث المتعددة لعناصر DOM المختلفة المرتبطة بأنواع الأحداث المختلفة.
نسخة الكود كما يلي:
// قائمة انتظار الحدث على عنصر DOM
دوم {
eventqueue: {
"انقر فوق": {
fnqueue1: وظيفة ،
myfn: وظيفة ،
fnqueue3: وظيفة
}
'mouseover': {
fnqueue1: وظيفة ،
fnqueue2: وظيفة
}
}
}
في كل مرة ، تتم إضافة وظيفة الحدث لأول مرة إلى قائمة انتظار الحدث لنوع الحدث المقابل ، ويتم ربط الحدث مرة واحدة فقط. عندما يتم تشغيل حدث ما ، يتم تنفيذ وظيفة حدث المعالج ، ويعبر المعالج وظيفة الحدث في قائمة انتظار حدث التنفيذ.
UNFIND () يزيل جميع وظائف الأحداث المرتبطة إذا لم يكن هناك معرف وارد ، ويدعم إزالة الوظائف المجهولة ، ويزيل وظائف الحدث المحددة إذا كان هناك معرف.
منطق البرنامج غير معقد ، وقد يكون هناك حشرات ومشاكل في الأداء. إذا كنت مهتمًا ، فيمكنك توجيه والتواصل.