1. Window.Event
【تعليمات التحليل】 انظر إلى قطعة من الكود أولاً
نسخة الكود كما يلي:
وظيفة et ()
{
تنبيه (حدث) ؛ // أي: [كائن]
}
نتيجة الكود أعلاه الذي يعمل في IE هو [كائن] ، ولكن لا يمكن تشغيله في Firefox.
نظرًا لأنه يمكن استخدام الحدث مباشرةً كخاصية لكائن نافذة في IE ، ولكن في Firefox ، يتم استخدام نموذج W3C ، والذي ينتشر الأحداث من خلال طريقة تمرير المعلمات ، أي أنك تحتاج إلى توفير واجهة استجابة للحدث لوظائفك.
[معالجة التوافق] أضف حكم الحدث والحصول على الحدث الصحيح وفقًا للمتصفح:
نسخة الكود كما يلي:
وظيفة et ()
{
evt = evt؟ evt: (window.event؟ window.event: null) ؛
// متوافق مع IE و Firefox
تنبيه (EVT) ؛
}
2. اكتساب قيمة لوحة المفاتيح
[ملاحظة التحليل] تختلف طرق الحصول على قيم لوحة المفاتيح من IE و Firefox. يمكن أن يُفهم أن الحدث. الذي تحت إشراف Firefox يعادل الحدث. keycode تحت IE. للاختلافات لبعضنا البعض ، يرجى الرجوع إلى "اختبار التوافق مع رمز المفاتيح ، وهو و charcode في أحداث لوحة المفاتيح"
【معالجة متوافقة】
انسخ الرمز
نسخة الكود كما يلي:
وظيفة mykeypress (evt) {
// متوافق مع IE و Firefox للحصول على كائن لوحة المفاتيح
EVT = (EVT)؟ evt: ((window.event)؟ window.event: "")
// متوافق مع IE و Firefox للحصول على القيمة الرئيسية لكائن لوحة المفاتيح
var key = evt.keycode؟ evt.keycode: evt.hich ؛
if (evt.ctrlkey && (key == 13 || key == 10)) {
// تم الضغط على Ctrl والدخول في نفس الوقت
// افعل شيئًا ؛
}
}
3. الحصول على مصدر الحدث
[ملاحظة التحليل] عند استخدام مندوبي الأحداث ، يمكننا تحديد العنصر الذي يأتي من خلال اكتساب مصدر الحدث. ومع ذلك ، في IE ، يحتوي كائن الحدث على خاصية srcelement ، ولكن لا يوجد خاصية مستهدفة ؛ في Firefox ، يحتوي الكائن حتى على خاصية مستهدفة ، ولكن لا يوجد خاصية srcelement.
【معالجة متوافقة】
نسخة الكود كما يلي:
eLe = function (evt) {// التقاط الكائن الذي يتصرف الحدث الحالي
evt = evt || window.event ؛
يعود
(obj = event.srcelement؟ event.srcelement: event.target ؛) ؛
}
4. مراقبة الأحداث
[ملاحظة التحليل] من حيث الاستماع إلى الحدث ومعالجته ، يوفر أي اثنين واجهتين: AttachEvent و Detachevent ، بينما يوفر Firefox AddeventListener و RemoveEventListener.
[معالجة التوافق] أبسط معالجة التوافق هي تغليف هاتين المجموعتين من الواجهات:
نسخة الكود كما يلي:
وظيفة AddEvent (Elem ، eventName ، Handler) {
if (elem.attachevent) {
elem.attachevent ("on" + eventName ، function () {
Handler.Call (elem)}) ؛
// استخدم استدعاء وظيفة رد الاتصال () هنا ، دع هذه النقطة إلى Elem
} آخر إذا (elem.addeventListener) {
elem.addeventListener (eventName ، Handler ، false) ؛
}
}
وظيفة إزالة (elem ، eventName ، Handler) {
if (elem.detachevent) {
elem.detachevent ("on" + eventName ، function () {
Handler.Call (elem)}) ؛
// استخدم استدعاء وظيفة رد الاتصال () هنا ، دع هذه النقطة إلى Elem
} آخر إذا (elem.removeeventListener) {
elem.RemoveEventListener (eventName ، Handler ، false) ؛
}
}
تجدر الإشارة إلى أنه بموجب Firefox ، يشير هذا في وظيفة معالجة الأحداث إلى العنصر المستمع نفسه ، ولكن في IE ، يمكنك استخدام استدعاء وظيفة رد الاتصال للسماح للسياق الحالي يشير إلى العنصر المستمع.
5. موقف الماوس
[ملاحظة التحليل] تحت IE ، يحتوي الكائن الزوجي على سمات X و Y ، ولكن لا توجد سمات Pagex و Pagey ؛ تحت Firefox ، يحتوي الكائن الزوجي على سمات pagex و pagey ، ولكن لا توجد سمات x و y.
[معالجة التوافق] استخدم MX (MX = Event.x؟ يجب النظر في الموقف المطلق للنقاط المعقدة.
نسخة الكود كما يلي:
وظيفة getabspoint (e) {
var x = e.offsetleft ، y = e.offsettop ؛
بينما (e = e.offsetParent) {
x += e.offsetLeft ؛
y += e.offsettop ؛
}
ALERT ("X:" + X + "،" + "y:" + y) ؛
}