تصف هذه المقالة استخدام الأحداث المخصصة في JavaScript. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
في التطوير الأمامي على الويب ، قد لا يستخدم الكثير من الأشخاص أحداث JS المخصصة ، ولكن إذا كنت تقوم بمشروع كبير نسبيًا ، خاصةً عندما يتطور العديد من الأشخاص معًا ، تكون الأحداث المخصصة مهمة للغاية. إذن ، ما هي الأحداث المخصصة في JS؟ دعونا نلقي نظرة أولاً على مثال:
مطور الواجهة الأمامية يتضمن وظيفة:
انسخ الرمز على النحو التالي: وظيفة move () {
تنبيه (أ) ؛ // هذا يمثل رمز N-Line
}
بعد فترة من الوقت ، سوف يثري المطور الأمامي B هذه الوظيفة بناءً على A ، لذلك سوف يكتب مثل هذا:
انسخ الرمز على النحو التالي: وظيفة move () {
تنبيه (أ) ؛ // هذا يمثل رمز N-Line
تنبيه (ب) ؛ // هذا يمثل خطوط الكود n
}
هل اكتشفت المشكلة؟ يجب على B الانتباه إلى مشكلات التسمية والصراع مع المتغيرات والوظائف ، وما إلى ذلك مع A. بعد فترة من الوقت ، يجب على المطور الأمامي C أيضًا إثراء هذه الوظيفة ، لذلك:
انسخ الرمز على النحو التالي: وظيفة move () {
تنبيه (أ) ؛ // هذا يمثل رمز N-Line
تنبيه (ب) ؛ // هذا يمثل خطوط الكود n
تنبيه (ج) ؛ // هذا يمثل خطوط الكود n
}
سيكون من الجنون في هذا الوقت ، وأنا متأكد من أنه لن يكون من السهل على C كتابة الرمز. الحل لهذه المشكلة هو تخصيص الحدث ، ونحن نعلم أن العنصر يمكن أن يضيف نفس الحدث دون التأثير على بعضنا البعض ، مثل:
نسخة الكود كما يلي: window.adDeventListener ('click' ، function () {
تنبيه (1) ؛
} ،خطأ شنيع)؛
Window.AdDeventListener ("Click" ، Function () {
تنبيه (2) ؛
} ،خطأ شنيع)؛
عند النقر على الصفحة ، سيظهر 1 و 2 ، حتى نتمكن من استخدام هذه الطريقة لتحديد وظيفتنا:
نسخة الكود كما يلي: window.adDeventListener ('Move' ، function () {
تنبيه (3) ؛
} ،خطأ شنيع)؛
Window.AdDeventListener ('Move' ، function () {
تنبيه (4) ؛
} ،خطأ شنيع)؛
بهذه الطريقة ، عندما ننفذ MOVE () ؛ ، 3 و 4 سوف يطفو على السطح. هنا ، Move هو حدث مخصص ، إنه في الواقع وظيفة
دعونا نرى كيفية تمرير المعلمات إلى معالجات الأحداث:
انسخ الرمز كما يلي: // تغليف الوظيفة مع المعلمات في دالة بدون معلمات
وظيفة createFunction (OBJ ، strfunc) {
var args = [] ؛ // تحديد args لتخزين المعلمات التي تم تمريرها إلى معالجات الأحداث
إذا (! obj) obj = نافذة ؛ // إذا كانت وظيفة عالمية ، OBJ = نافذة ؛
// احصل على المعلمات إلى معالج الحدث
لـ (var i = 2 ؛ i <enduces.length ؛ i ++) args.push (الوسيطات [i]) ؛
// استخدم Call of Event Falller مع وظيفة بدون معلمة
وظيفة الإرجاع () {
obj [strfunc] .apply (obj ، args) ؛ // تمرير المعلمة إلى معالج الحدث المحدد
}
}
وظيفة class1 () {
}
class1.prototype = {
عرض: وظيفة () {
this.onshow () ؛
} ،
Onshow: function () {}
}
وظيفة objonshow (اسم المستخدم) {
ALERT ("Hello ،" + اسم المستخدم) ؛
}
اختبار الوظيفة () {
var obj = new class1 () ؛
var username = "test" ؛
obj.onshow = createFunction (null ، "objonshow" ، اسم المستخدم) ؛
obj.show () ؛
}
"نظرًا لأن آلية الحدث تمرر فقط اسم وظيفة بدون أي معلومات معلمة ، فمن المستحيل تمرير المعلمات". هذه قصة لاحقة. "لحل هذه المشكلة ، يمكنك التفكير من الفكرة المعاكسة ، وليس التفكير في كيفية تمرير المعلمات في ، ولكن النظر في كيفية بناء معالج الأحداث دون معلمات. يتم إنشاء البرنامج بناءً على معالج الأحداث مع المعلمات وهو عبارة عن تغليف خارجي." "البرنامج" هنا هو وظيفة CreateFunction ، والتي تستخدم بذكاء وظيفة تطبيق لتغليف الوظيفة مع المعلمات في وظيفة بدون معلمة. أخيرًا ، دعونا نلقي نظرة على كيفية تنفيذ ربط متعدد الأفعال للأحداث المخصصة:
انسخ الرمز كما يلي: // لتمكين الأحداث المخصصة لدعم الارتباطات المتعددة
// تغليف دالة مع المعلمات في دالة بدون معلمات
وظيفة createFunction (OBJ ، strfunc) {
var args = [] ؛ // تحديد args لتخزين المعلمات التي تم تمريرها إلى معالجات الأحداث
إذا (! obj) obj = نافذة ؛ // إذا كانت وظيفة عالمية ، OBJ = نافذة ؛
// احصل على المعلمات إلى معالج الحدث
لـ (var i = 2 ؛ i <enduces.length ؛ i ++) args.push (الوسيطات [i]) ؛
// استخدم Call of Event Falller مع وظيفة بدون معلمة
وظيفة الإرجاع () {
obj [strfunc] .apply (obj ، args) ؛ // تمرير المعلمة إلى معالج الحدث المحدد
}
}
وظيفة class1 () {
}
class1.prototype = {
عرض: وظيفة () {
إذا (this.onshow) {
لـ (var i = 0 ؛ i <this.onshow.length ؛ i ++) {
this.onshow [i] () ؛
}
}
} ،
ackingonshow: function (_eHandler) {
if (! this.onshow) {this.onshow = [] ؛ }
this.onshow.push (_eHandler) ؛
}
}
وظيفة objonshow (اسم المستخدم) {
ALERT ("Hello ،" + اسم المستخدم) ؛
}
وظيفة objonshow2 (testName) {
ALERT ("Show:" + testName) ؛
}
اختبار الوظيفة () {
var obj = new class1 () ؛
var username = "اسمك" ؛
obj.attachonshow (createfunction (null ، "objonshow" ، اسم المستخدم)) ؛
obj.attachonshow (createfunction (null ، "objonshow2" ، "test message")) ؛
obj.show () ؛
}
نرى أن الفكرة الأساسية لتنفيذ طريقة attainonshow هي دفع الصفيف. في الواقع ، يمكننا أيضًا إزالة وظيفة معالج الأحداث بعد تنفيذ الحدث ، وتنفيذها بشكل منفصل أدناه:
انسخ الرمز كما يلي: // تغليف الوظيفة مع المعلمات في دالة بدون معلمات
وظيفة createFunction (OBJ ، strfunc) {
var args = [] ؛ // تحديد args لتخزين المعلمات التي تم تمريرها إلى معالجات الأحداث
إذا (! obj) obj = نافذة ؛ // إذا كانت وظيفة عالمية ، OBJ = نافذة ؛
// احصل على المعلمات إلى معالج الحدث
لـ (var i = 2 ؛ i <enduces.length ؛ i ++) args.push (الوسيطات [i]) ؛
// استخدم Call of Event Falller مع وظيفة بدون معلمة
وظيفة الإرجاع () {
obj [strfunc] .apply (obj ، args) ؛ // تمرير المعلمة إلى معالج الحدث المحدد
}
}
وظيفة class1 () {
}
class1.prototype = {
عرض: وظيفة () {
إذا (this.onshow) {
لـ (var i = 0 ؛ i <this.onshow.length ؛ i ++) {
this.onshow [i] () ؛
}
}
} ،
exchannshow: function (_eHandler) {// حدث إضافي
if (! this.onshow) {this.onshow = [] ؛ }
this.onshow.push (_eHandler) ؛
} ،
detachonshow: function (_eHandler) {// إزالة الحدث
if (! this.onshow) {this.onshow = [] ؛ }
this.onshow.pop (_eHandler) ؛
}
}
وظيفة objonshow (اسم المستخدم) {
ALERT ("Hello ،" + اسم المستخدم) ؛
}
وظيفة objonshow2 (testName) {
ALERT ("Show:" + testName) ؛
}
اختبار الوظيفة () {
var obj = new class1 () ؛
var username = "اسمك" ؛
obj.attachonshow (createfunction (null ، "objonshow" ، اسم المستخدم)) ؛
obj.attachonshow (createfunction (null ، "objonshow2" ، "test message")) ؛
obj.show () ؛
obj.detachonshow (createfunction (null ، "objonshow" ، اسم المستخدم)) ؛
obj.show () ؛ // قم بإزالة واحدة وعرض المتبقية
obj.detachonshow (createfunction (null ، "objonshow2" ، "test message")) ؛
obj.show () ؛ // يتم إزالتهما ، ولا يتم عرض أي منها
}
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.