في بعض الأحيان يكون من الضروري تحميل بعض أساليب أحداث جافا سكريبت ديناميكيًا
غالبًا ما نحتاج إلى إضافة الأحداث ديناميكيًا في JS، الأمر الذي يتضمن مشكلات في توافق المتصفح. غالبًا ما نستخدم مزيجًا من الطرق العديدة الموضحة أدناه.
الطريقة الأولى، تعيين السمة
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('test');");
هنا، يتم استخدام setAttribute لتحديد سمة onclick، وهي بسيطة وسهلة الفهم.
ومع ذلك: لا يدعم IE وظيفة setAttribute، ولكنه لا يدعم استخدام setAttribute لتعيين سمات معينة، بما في ذلك سمات الكائن وسمات المجموعة وسمات الأحداث تعيين النمط، وonclick، وonmouseover، وهو لا يعمل في IE.
الطريقة الثانية، استخدم AttachEvent وaddEventListener
يدعم IE AttachEvent
obj.attachEvent("onclick", Foo);
دالة فو ()
{
تنبيه ("اختبار")؛
}
ويمكن أيضا أن تكون مكتوبة معا
obj.attachEvent("onclick", function(){alert("test");});
المتصفحات الأخرى تدعم addEventListener
obj.addEventListener("click", Foo, false);
دالة فو ()
{
تنبيه ("اختبار")؛
}
ويمكن أيضًا كتابتها معًا
obj.addEventListener("click", function(){alert("Test");}, false);
لاحظ أن الحدث AttachEvent قيد التشغيل، مثل onclick، ولكن لا يتم تشغيل addEventListener، مثل click.
بالمناسبة، المعلمة الثالثة لـ addEventListener (على الرغم من أنها نادرة الاستخدام) useCapture - إذا كانت صحيحة، فإن useCapture يشير إلى أن المستخدم يرغب في بدء الالتقاط. عند بدء الالتقاط، سيتم إرسال كافة الأحداث من النوع المحدد إلى EventListener المسجل قبل إرسالها إلى أي EventTargets أسفله في الشجرة. لن تقوم الأحداث التي تظهر على الشجرة بإطلاق EventListener المحدد باستخدام الالتقاط.
تطبيق شامل
انسخ رمز الكود كما يلي:
إذا (window.attachEvent)
{
// رمز حدث IE
}
آخر
{
// رموز الأحداث للمتصفحات الأخرى
}
الطريقة الثالثة، الحدث = الوظيفة
مثال: obj.onclick = Foo؛
وهذا مدعوم في متصفحات متعددة، وهو ينتمي إلى المواصفات القديمة (الطريقة الثانية تنتمي إلى مواصفات DOM2)، ولكن لأنه سهل الاستخدام، يتم استخدامه في العديد من المواقف.
هذا هو الحل الخاص بي:
انسخ رمز الكود كما يلي:
عرض الوظيفة () {
تنبيه ("مرحبا بالعالم !!!")؛
}
obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');
يقوم الأسلوب AttachEvent بإرفاق أحداث معالجة أخرى بحدث ما. (سلسلة موزيلا غير مدعومة)
يتم استخدام طريقة addEventListener في سلسلة Mozilla
مثال:
document.getElementById("btn").onclick =method1;
document.getElementById("btn").onclick =method2;
document.getElementById("btn").onclick =method3;
إذا تمت كتابته بهذه الطريقة، فسيتم تنفيذ medhot3 فقط
اكتبها هكذا:
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
أمر التنفيذ هو الطريقة 3->الطريقة 2->الطريقة 1
إذا كانت سلسلة Mozilla، فهذه الطريقة غير مدعومة وتحتاج إلى استخدام addEventListener.
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
أمر التنفيذ هو الطريقة 1-> الطريقة 2-> الطريقة 3
أمثلة الاستخدام:
1.
انسخ رمز الكود كما يلي:
var el = EDITFORM_DOCUMENT.body;
// احصل على الكائن أولاً، EDITFORM_DOCUMENT هو في الواقع إطار iframe
إذا (el.addEventListener){
el.addEventListener('click', KindDisableMenu, false);
} وإلا إذا (el.attachEvent){
el.attachEvent('onclick', KindDisableMenu);
}
2.
انسخ رمز الكود كما يلي:
إذا (window.addEventListener) {
window.addEventListener('load', _uCO, false);
} وإلا إذا (window.attachEvent) {
window.attachEvent('onload', _uCO);
}