เหตุการณ์การเลื่อนหน้าบนรอกพบได้ในเอฟเฟกต์พิเศษของหน้าเว็บ แต่วิธีการใช้งานนั้นแตกต่างกันภายใต้เบราว์เซอร์ที่แตกต่างกัน วิธีการต่อไปนี้ที่ฉันนำไปใช้นั้นเข้ากันได้กับเบราว์เซอร์ทั่วไป
ฟังก์ชั่น getData (เหตุการณ์) {var e = เหตุการณ์ || window.event; // รับระยะเลื่อน (ff ข้อมูลการเลื่อนแต่ละข้อมูลคือ 3 หรือ -3, อื่น ๆ คือ 120 หรือ -120) ข้อมูล var = e.detail || E. wheeldelta; การแจ้งเตือน (ข้อมูล); } // วิธีการเชื่อมโยงเหตุการณ์นอกเช่น (document.addeventListener &&! document.attachevent) {document.addeventListener ('Mousewheel', getData); // ff binds เอกสารเหตุการณ์ Scroll.addeventListener ('Dommousescroll', getData); } // เช่นอื่น ๆ ถ้า (document.attachevent &&! document.addeventListener) {document.attachevent ('onmousewheel', getData); } else {window.onmousewheel = getData; -สิ่งที่น่าสังเกตในรหัส:
1 ทำไมใช้ document.addeventListener &&! document.attachevent เพื่อแยกความแตกต่างคือ?
AttachEvent และ Detachevent เป็นวิธีการเฉพาะสำหรับเหตุการณ์ที่มีผลผูกพันและเหตุการณ์ที่ไม่ จำกัด และวิธีนี้มีอยู่ใน IE เท่านั้น อย่างไรก็ตามในเบราว์เซอร์ IE9+ ได้มีการใช้วิธี AddEventListener ทั่วไปเพื่อผูกเหตุการณ์ หาก Document.addeventListener ในเบราว์เซอร์สามารถยกเว้นวิธีการที่ไม่ใช่ IE8 และด้านล่าง แต่รวมถึงเบราว์เซอร์ IE9+ ดังนั้นให้ใช้ &&! document.attachevent เพื่อยกเว้นเบราว์เซอร์ IE9+ ในภายหลัง
2 เป็นที่น่าสังเกตว่าไม่มีเหตุการณ์ Mousewheel ในเบราว์เซอร์ FF และเวลาที่การเลื่อนถูกกระตุ้นคือ Dommousescroll
3 สิ่งที่ควรค่าแก่การสังเกตคือเมื่อใช้ AddEventListener เพื่อผูกเหตุการณ์จะไม่มีการเพิ่มก่อนที่จะมีการเพิ่มชื่อเหตุการณ์ แต่เมื่อใช้ AttachEvent เพื่อผูกเหตุการณ์ใน IE จะต้องใช้