كيفية تمرير المعلمات إلى معالج الحدث؟ عندما تعاملت مع Javascript لأول مرة، غالبًا ما كنت أعاني من هذه المشكلة لأنه لم يكن لدي فهم عميق لعمليات الإغلاق.
كثيرا ما أواجه هذا النوع من المشاكل في مجموعات المناقشة، على النحو التالي:
انسخ رمز الكود كما يلي:
<!DOCTYPE HTML>
<أتش تي أم أل>
<الرأس>
<ميتا محارف = "utf-8">
<title>كيفية تمرير المعلمات إلى معالج الأحداث؟ </العنوان>
</الرأس>
<الجسم>
<a href="#" id="aa">انقر فوقي</a>
<نوع البرنامج النصي = "نص/جافا سكريبت">
فار ه = {
على: وظيفة (ش، نوع، الجبهة الوطنية) {
el.addEventListener؟
el.addEventListener(type, fn, false):
el.attachEvent("on" + type, fn);
},
الأمم المتحدة: وظيفة (ش، نوع، الجبهة الوطنية) {
el.removeEventListener؟
el.removeEventListener(type, fn, false):
el.detachEvent("on" + type, fn);
}
};
var v1 = 'jack', v2 = 'lily';
معالج الوظيفة (arg1، arg2) {
تنبيه (arg1)؛
تنبيه (arg2)؛
}
// كيفية تمرير المعلمات v1 و v2 إلى المعالج؟
// سيتم تمرير كائن الحدث الافتراضي كمعلمة أولى للمعالج.
// في هذا الوقت، أول ما ينبثق عند النقر على الرابط هو كائن الحدث، والثاني غير محدد.
E.on(document.getElementById('aa'),'click',handler);
</script>
</الجسم>
</html>
كيفية تمرير المعلمات v1 و v2 إلى المعالج؟ سيتم تمرير كائن الحدث الافتراضي باعتباره المعلمة الأولى للمعالج عند النقر فوق الارتباط، أول شيء ينبثق هو كائن الحدث، والثاني غير محدد.
الخيار 1، لا يتم الاحتفاظ بكائن الحدث وتمريره كمعلمة أولى
انسخ رمز الكود كما يلي:
معالج الوظيفة (arg1، arg2) {
تنبيه (arg1)؛
تنبيه (arg2)؛
}
E.on(document.getElementById('aa'),'click',function(){
معالج(arg1,arg2);
});
الخيار 2، الاحتفاظ بكائن الحدث كمعلمة أولى
انسخ رمز الكود كما يلي:
معالج الوظيفة (ه، arg1، arg2) {
تنبيه (ه)؛
تنبيه (arg1)؛
تنبيه (arg2)؛
}
E.on(document.getElementById('aa'),'click',function(e){
معالج(e,arg1,arg2);
});
الخيار 3: إضافة getCallback إلى Function.prototype دون الاحتفاظ بكائن الحدث
انسخ رمز الكود كما يلي:
Function.prototype.getCallback = function(){
var _this = this, args = الوسيطات;
وظيفة الإرجاع (هـ) {
return _this.apply(this || window, args);
};
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));
الخيار 4: أضف getCallback إلى Function.prototype واحتفظ بكائن الحدث كمعلمة أولى.
انسخ رمز الكود كما يلي:
Function.prototype.getCallback = function(){
var _this = this, args = [];
for(var i=0,l=arguments.length;i<l;i++){
args[i+1] = الوسيطات[i];
}
وظيفة الإرجاع (هـ) {
args[0] = e;
return _this.apply(this || window, args);
};
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));