قم بتغليف معالج الأحداث على مستوى DOM ومعالج أحداث DOM2 IE معالج الأحداث في كائنات EventUtil لتحقيق تأثير المتصفح. الرمز كما يلي:
var eventUtil = {// إضافة مقبض الحدث addEventHandler: function (element ، type ، handler) {if (element.addeventListener) {element.adDeventLister (type ، handler ، false) ؛ removeEventHandler: function (element ، type ، handler) {if (element.removeeventListener) {element.RemoveEventListener (type ، handler ، false) ؛} else else (element.detachevent) {element.detachevent ("on"+type ، handler) ؛ {{reverured event؟ الحدث: window.event ؛} ، // احصل على نوع الحدث gettype: function (event) {return event.type ؛ (event.target) {return event.target ؛} else {return event.srcelement ؛}} ، // احصل على هدف كائن الحدث getTarget: function (event) {if (event.target) {return. {event.stopPropagation () ؛} آخر {event.cancelBubble = true ؛}} ، // منع السلوك الافتراضي للحدث PRESEDEFAULT: function (event) {if (event.preventDefault) {event.preventDefault () ؛أثناء ممارسة الرمز ، ارتكبت العديد من الأخطاء ، مما تسبب في خطأ العملية. سجلها وتعميق ذاكرتي.
① إضافة مقبض هو الموقع الذي يتم فيه تمييز المعلمة: أولاً ، معلمات AddEventHandler (العنصر ، النوع ، المعالج) على التوالي تمثل عنصر العنصر الذي يتم إضافته إلى الحدث ، ونوع الحدث ، ومعالج وظيفة معالجة الأحداث. أنت عرضة للتشويش على مواقف المعالج والخطأ (تمثل مرحلة الفقاعات) في addeventlister اللاحقة (النوع ، معالج ، خطأ).
مما يؤدي إلى النتيجة: أثناء عملية الكتابة ، فكرت في الأمر بعناية وفهمت المعلمات التي يحتاجها AddeventHandler ، ثم عرفت المعلمة التي يجب استخدامها في أي موقف. أخيرًا ، كتبت ذلك بشكل صحيح ، ولم يسبب خطأ.
الحل: فهم وتذكر.
② في فرع الحكم المعالج IE ، يتم توضيح الملحق والفصل بشكل غير صحيح ، ويكون الحدث مفقودًا ، ويتم كتابة التعلق أو الفصل فقط.
لأن النتيجة: على الرغم من عدم وجود خطأ ، إلا أنه من المستحيل إضافة أو حذف الأحداث في IE باستخدام AddEventHandler و RemoveEventHandler.
الحل: فقط تدرب أكثر وتذكره. ملحق و detachevent.
③ نسيت إضافة "على" إلى معلمات مرفق معالج أحداث IE و detachevent ؛ هو مكتوب على أنه ملحق (النوع ، معالج). في الواقع ، يجب أن يكون الصحيح مرفقًا ("ON"+Type ، Handler) ، وقد نسيت أيضًا أن هناك فرعًا للحكم لمعالجة أحداث مستوى DOM0.
أسباب النتيجة: وبالمثل ، فإن معالجة الأحداث غير متوافقة. لا يمكن أن تنجح إضافة أو حذف الأحداث باستخدام طرق مغلفة على IE.
الحل: فقط تذكر. شيء آخر يجب ملاحظة: عنصر ["ON"+type] يستخدم في أحداث مستوى DOM0. على سبيل المثال ، العنصر ["ON"+"Click"] يعادل element.onclick.
④ تتم إضافة السمة الأخيرة أيضًا مع فاصلة في النهاية ، مثل السلوك الافتراضي لـ PreventDefault عند حظر الحدث: إضافة فاصلة بعد الانتهاء ، مثل مقتطف الرمز التالي (تعليق)
PreventDefault: Function (event) {if (event.preventDefault) {event.preventDefault () ؛} آخر {Event.ReturnValue = false ؛}} ،يسبب النتيجة: تم الإبلاغ عن خطأ عند تشغيله في IE (حيث الخط 54 من Event.js هو السطر التالي من الفاصلة الأخيرة ، والذي يحدث بالفعل بسبب فاصلة ؛ السطر 10 من test.html يسمى أن eventutil.addeventhandler طريقة في Event.js.
الحل: لا شك ، فقط قم بإزالة الفاصلة الأخيرة.
⑤ لا يزال خطأ إملائي. تم كتابة خاصية CancelBubble في IE التي تمنع الأحداث من Bubled Up مع واحد آخر ، والتي تتم كتابتها كإلغاء.
النتيجة: لم يتم الإبلاغ عن أي خطأ ، ولكن لا يمكن منع الأحداث في IE من الفقاعات.
الحل: قم بتغييره مرة أخرى
ما ورد أعلاه هو مشكلة الخطأ منخفض المستوى الذي يقوم JavaScript بتغليف معالج أحداث DOM في Event.js الذي تم تقديمه بواسطة المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!