มาสรุปสิ่งง่ายๆ
หมายเหตุ: วิธีการต่อไปนี้ถูกห่อหุ้มในวัตถุ EventUtil และใช้วิธีการนิยามตัวอักษรของวัตถุโดยตรง - -
วิธีการจัดกิจกรรม ADD
AddHandler: ฟังก์ชั่น (องค์ประกอบ, ประเภท, ตัวจัดการ) {if (element.addeVentListener) {// การตรวจจับไม่ว่าจะเป็นองค์ประกอบวิธี DOM2-level.addeVentListener (ประเภท, ตัวจัดการ, เท็จ); } อื่นถ้า (element.attachevent) {// การตรวจจับไม่ว่าจะเป็นองค์ประกอบระดับ IE-level.attachevent ("on" + type, handler); } else {// การตรวจจับไม่ว่าจะเป็นองค์ประกอบวิธี DOM0 ระดับ ["on" + type] = handler; -remove วิธีการเหตุการณ์ที่เพิ่มขึ้นก่อนหน้านี้
removeHandler: ฟังก์ชั่น (องค์ประกอบ, ประเภท, ตัวจัดการ) {ถ้า (element.removeeVentListener) {element.removeeVentListener (ประเภท, ตัวจัดการ, เท็จ); } อื่นถ้า (element.detachevent) {element.detachevent ("on" + type, handler); } else {element ["on" + type] = null; -③รับเป้าหมายเหตุการณ์และวัตถุเหตุการณ์
// รับความเข้ากันได้ของวัตถุเหตุการณ์ที่เขียนใน GetEvent: ฟังก์ชั่น (เหตุการณ์) {เหตุการณ์ส่งคืน? เหตุการณ์: window.event; }, // รับความเข้ากันได้ของเป้าหมายวัตถุเหตุการณ์ที่เขียนใน getTarget: function (เหตุการณ์) {return event.target || เหตุการณ์. -④เปรียบเทียบการเขียนเพื่อบล็อกเหตุการณ์เริ่มต้นของเบราว์เซอร์
preventDefault: ฟังก์ชั่น (เหตุการณ์) {ถ้า (event.preventDefault) {event.preventDefault (); } else {event.returnValue = false; -⑤เปรียบเทียบการเขียนเพื่อป้องกันเหตุการณ์จากฟองสบู่
stopPropagation: ฟังก์ชั่น (เหตุการณ์) {ถ้า (event.stoppropagation) {event.stoppropagation (); } else {event.cancelBubble = true; -⑥วิธีการรับองค์ประกอบที่เกี่ยวข้องรวมอยู่ในเหตุการณ์ Mouseover และ Mouseout เท่านั้น
// วิธีการที่จะได้รับองค์ประกอบที่เกี่ยวข้องที่รวมอยู่ในกิจกรรม MouseOver และ Mouseout getRelatedTarget: ฟังก์ชั่น (เหตุการณ์) {ถ้า (Event.RelatedTarget) {return event.RelatedTarget; } อื่นถ้า (event.toElement) {return event.toElement; } อื่นถ้า (Event.FromElement) {return event.Fromelement; } else {return null; -⑦การตัดสินล้อของเมาส์
สำหรับเหตุการณ์ Mousedown และ Mouseup คุณสมบัติของปุ่มมีอยู่ในวัตถุเหตุการณ์
ระบุปุ่มกดหรือปล่อยออกมา แอตทริบิวต์ปุ่มของ DOM อาจมี 3 ค่าต่อไปนี้: 0 หมายถึงปุ่มเมาส์หลักและ 1 หมายถึงเมาส์ที่อยู่ตรงกลาง
2 หมายถึงปุ่มเมาส์ ในการตั้งค่าทั่วไปปุ่มเมาส์หลักคือปุ่มเมาส์ซ้ายและเมาส์ตัวที่สอง
ปุ่มคือปุ่มเมาส์ขวา
IE8 และเวอร์ชันก่อนหน้ายังให้แอตทริบิวต์ปุ่ม แต่ค่าของแอตทริบิวต์นี้แตกต่างจากแอตทริบิวต์ปุ่มของ DOM มาก
0: หมายความว่าปุ่มไม่ได้กด
1: ระบุว่ากดปุ่มเมาส์หลักแล้ว
2: ระบุว่าปุ่มเมาส์ถูกกดสองครั้ง
3: ระบุว่าปุ่มเมาส์หลักและรองถูกกดในเวลาเดียวกัน
4: ระบุว่ากดปุ่มเมาส์กลางแล้ว
5: ระบุว่าปุ่มเมาส์หลักและปุ่มเมาส์กลางถูกกดในเวลาเดียวกัน
6: หมายความว่าปุ่มเมาส์และปุ่มเมาส์ตรงกลางถูกกดในเวลาเดียวกัน
7: ระบุว่ามีการกดปุ่มเมาส์สามปุ่มในเวลาเดียวกัน
getButton: ฟังก์ชั่น (เหตุการณ์) {if (document.implementation.hasfeature ("MouseEvents", "2.0")) {return event.button; } else {switch (event.button) {กรณี 0: กรณีที่ 1: กรณีที่ 3: กรณีที่ 5: กรณี 7: return 0; กรณีที่ 2: กรณีที่ 6: return 2; กรณีที่ 4: return 1; -⑧วิธีการรับค่าที่เพิ่มขึ้นของล้อเมาส์ (เดลต้า)
getwheeldelta: ฟังก์ชั่น (เหตุการณ์) {ถ้า (event.wheeldelta) {return (client.engine.opera && client.engine.opera <9.5? -event.wheeldelta: event.wheeldelta); } else {return -event.detail * 40; // ค่าใน firefox คือ +3 เพื่อเลื่อนขึ้น, -3 เพื่อเลื่อนลง}}การเข้ารหัสของการเข้ารหัสอักขระในแบบข้ามเบราว์เซอร์
getChArcode: ฟังก์ชั่น (เหตุการณ์) {ถ้า (typeof event.charcode == "number") {return event.charcode; } else {return event.keycode; -⑩เข้าถึงข้อมูลในคลิปบอร์ด
getClipboardText: ฟังก์ชั่น (เหตุการณ์) {var clipboardData = (event.clipboardData || window.clipboardData); ส่งคืน clipboarddata.getData ("ข้อความ"); -11. ตั้งค่าข้อมูลในคลิปบอร์ด
setClipBoardText: function (event, value) {if (event.clipboardData) {return event.clipboardData.setData ("text/plain", ค่า); } อื่นถ้า (window.clipboardData) {return window.clipboardData.setData ("ข้อความ", ค่า); -ห่อหุ้มมันแล้วคุณสามารถใช้โดยตรง
สำหรับไฟล์ที่สมบูรณ์และรูปแบบการรีเซ็ตพื้นฐานของ CSS และน้อยกว่าดู: https://github.com/luckywinty/resetfile
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน