ห่อหุ้มตัวจัดการเหตุการณ์ระดับ 0 DOM ระดับและตัวจัดการเหตุการณ์ระดับ DOM2 เช่นตัวจัดการเหตุการณ์ในวัตถุ existutil เพื่อให้ได้เอฟเฟกต์ข้ามเบราว์เซอร์ รหัสมีดังนี้:
var eventutil = {// เพิ่มการจัดการเหตุการณ์ addeventHandler: ฟังก์ชั่น (องค์ประกอบ, ประเภท, ตัวจัดการ) {ถ้า (element.addeventListener) {element.addeventListener (ประเภท, ตัวจัดการ, เท็จ); ลบเหตุการณ์ที่จับ removeEventHandler: ฟังก์ชั่น (องค์ประกอบ, ประเภท, ตัวจัดการ) {ถ้า (element.removeEventListener) {element.removeEventListener (ประเภท, ตัวจัดการ, เท็จ);} อื่นถ้า (element.detachevent) {element.detachevent ("on" GetEvent: ฟังก์ชั่น (เหตุการณ์) {return event? เหตุการณ์: window.event;}, // รับประเภทของเหตุการณ์ getType: ฟังก์ชั่น (เหตุการณ์) {return event.type;}, // รับเป้าหมายวัตถุเหตุการณ์ getTarget: ฟังก์ชั่น (เหตุการณ์) {if (event.target) {return event.target; (เหตุการณ์) {if (event.target) {return event.target;} else {return event.srcenement;}}, // รับเป้าหมายวัตถุเหตุการณ์ getTarget: ฟังก์ชั่น (เหตุการณ์) {ถ้า (event.target) {return event.target; (Event.stopPropagation) {Event.stopPropagation ();} else {Event.cancelBubble = true;}}, // ป้องกันพฤติกรรมเริ่มต้นของเหตุการณ์ preventDefault: ฟังก์ชั่น (เหตุการณ์) {ถ้า (Event.preventDefault) {Event.preventDefault ()ในขณะที่ฝึกรหัสฉันทำผิดพลาดหลายประการซึ่งทำให้เกิดข้อผิดพลาดในการดำเนินการ บันทึกและทำให้ความทรงจำของฉันลึกซึ้งยิ่งขึ้น
①การเพิ่มที่จับคือตำแหน่งที่พารามิเตอร์จะทำให้งงงวย: ก่อนอื่นพารามิเตอร์ของ addeventHandler (องค์ประกอบ, ประเภท, ตัวจัดการ) ตามลำดับแสดงถึงองค์ประกอบองค์ประกอบใดที่ถูกเพิ่มเข้าไปในเหตุการณ์ประเภทของเหตุการณ์และตัวจัดการฟังก์ชั่นการจัดการเหตุการณ์ คุณมีแนวโน้มที่จะสร้างความสับสนให้กับตำแหน่งของตัวจัดการและเท็จ (เป็นตัวแทนของขั้นตอนเดือด) ใน AddeventLister ในภายหลัง (ประเภท, ตัวจัดการ, เท็จ)
นำไปสู่ผลลัพธ์: ในระหว่างกระบวนการเขียนฉันคิดถึงมันอย่างรอบคอบและเข้าใจว่าพารามิเตอร์ใดที่ AddeventHandler ต้องการจากนั้นฉันก็รู้ว่าพารามิเตอร์ใดที่จะใช้ในตำแหน่งใด ในที่สุดฉันก็เขียนอย่างถูกต้องและไม่ได้ทำให้เกิดข้อผิดพลาด
วิธีแก้ปัญหา: เข้าใจและจดจำ
②ในสาขา Handler Judgement Branch, AttachEvent และ Detachevent สะกดไม่ถูกต้องและเหตุการณ์หายไปและมีเฉพาะแนบหรือถอดออกเท่านั้น
ทำให้ผลลัพธ์: แม้ว่าจะไม่มีข้อผิดพลาด แต่ก็เป็นไปไม่ได้ที่จะเพิ่มหรือลบเหตุการณ์ใน IE โดยใช้ addeventHandler และ removeEventHandler
วิธีแก้ปัญหา: เพียงแค่ฝึกฝนมากขึ้นและจำไว้ AttachEvent และ Detachevent
③ลืมที่จะเพิ่ม "บน" ลงในพารามิเตอร์ของ IE Event Handler AttachEvent และ Detachevent; มันถูกเขียนเป็น attaineVent (ประเภท, ตัวจัดการ) ในความเป็นจริงสิ่งที่ถูกต้องควรเป็นไปได้ ("on"+type, handler) และฉันก็ลืมไปว่ามีสาขาการตัดสินสำหรับการประมวลผลเหตุการณ์ระดับ DOM0
ผลลัพธ์ที่ได้: ในทำนองเดียวกันการประมวลผลเหตุการณ์ไม่เข้ากันได้ การเพิ่มหรือลบเหตุการณ์โดยใช้วิธีการที่ห่อหุ้มด้วย IE ไม่สามารถประสบความสำเร็จได้
วิธีแก้ปัญหา: จำไว้เท่านั้น อีกสิ่งที่ควรทราบ: องค์ประกอบ ["on"+type] ใช้ในเหตุการณ์ระดับ DOM0 ตัวอย่างเช่นองค์ประกอบ ["on"+"คลิก"] เทียบเท่ากับ element.onclick
④แอตทริบิวต์สุดท้ายจะถูกเพิ่มด้วยเครื่องหมายจุลภาคในตอนท้ายเช่นพฤติกรรมเริ่มต้นของ PreventDefault เมื่อปิดกั้นเหตุการณ์: เพิ่มเครื่องหมายจุลภาคหลังจากเสร็จสิ้นเช่นข้อมูลโค้ดต่อไปนี้ (ความคิดเห็น)
preventDefault: ฟังก์ชั่น (เหตุการณ์) {ถ้า (event.preventDefault) {event.preventDefault ();} else {event.returnValue = false;}}, // คุณสมบัติสุดท้าย preventDefault ถูกเพิ่มด้วยเครื่องหมายจุลภาคหลังจากเสร็จสิ้นข้อผิดพลาดจะเกิดขึ้น}ทำให้เกิดผลลัพธ์: มีการรายงานข้อผิดพลาดเมื่อทำงานใน IE (ที่บรรทัด 54 ของเหตุการณ์. js เป็นบรรทัดถัดไปของเครื่องหมายจุลภาคสุดท้ายซึ่งเกิดจากเครื่องหมายจุลภาค; บรรทัดที่ 10 ของการทดสอบ. html ถูกเรียกเพราะวิธี eventutil.addeventhandler ในเหตุการณ์ js ถูกเรียกว่า)
การแก้ไข: ไม่ต้องสงสัยเลยว่าเพียงลบเครื่องหมายจุลภาคสุดท้าย
⑤ยังคงเป็นข้อผิดพลาดในการสะกดคำ การยกเลิกคุณสมบัติของคุณสมบัติใน IE ที่ป้องกันเหตุการณ์จาก Bubbled Up ได้ถูกเขียนขึ้นด้วยอีกหนึ่ง s ซึ่งเขียนเป็น cancelbubbles
ผลลัพธ์: ไม่มีการรายงานข้อผิดพลาด แต่เหตุการณ์ใน IE ไม่สามารถป้องกันได้จากฟองสบู่
วิธีแก้ปัญหา: เปลี่ยนกลับ
ข้างต้นเป็นปัญหาข้อผิดพลาดระดับต่ำที่ JavaScript ห่อหุ้มตัวจัดการเหตุการณ์ DOM ลงใน Event.js แนะนำโดย Editor ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!