1. เหตุการณ์ข้ามแพลตฟอร์ม
เหตุการณ์ข้ามแพลตฟอร์มคืออะไร? นั่นคือเหตุการณ์เดียวกันจะถูกดำเนินการบนเบราว์เซอร์ที่แตกต่างกันและวิธีการที่ใช้นั้นแตกต่างกัน
วัตถุ Eventutil คืออะไร? ฟังก์ชั่นของมันคืออะไร? นั่นคือคอนเทนเนอร์ที่รวมฟังก์ชั่นทั้งหมดที่เกี่ยวข้องกับเหตุการณ์เพื่ออำนวยความสะดวกในการจัดการวัตถุเหตุการณ์และไม่มีคุณลักษณะ ส่วนใหญ่เกี่ยวข้องกับการทำงานระหว่างเหตุการณ์ DOM และเหตุการณ์เช่นเพื่อทำให้พวกเขาใกล้เคียงกันมากที่สุด
มาดูคุณสมบัติของวัตถุและวิธีการระหว่าง DOM และ IE เพื่อเปรียบเทียบ (มีคุณสมบัติและวิธีการที่แตกต่างกันระหว่างทั้งสองเท่านั้น) มีห้าประเด็นหลัก:
คุณสมบัติ DOM และวิธีการเช่นคุณสมบัติและวิธีการ
ปุ่มกดรหัส
preventDefault returnValue = false
ที่เกี่ยวข้องเป้าหมาย Fromobj | toobj
stoppropation cancelBuble = true
เป้าหมาย srcobj
ลองมาดูด้วยการสาธิตเล็ก ๆ ซึ่งสามารถแก้ปัญหาความเข้ากันได้ของเหตุการณ์ข้ามแพลตฟอร์มของเหตุการณ์:
<html> <head> <title> eventutil </title> <script eventType = "text/javascript"> var eventutil = {// ฟังเหตุการณ์ addListener: ฟังก์ชั่น (obj, eventtype, fn) {ถ้า (obj.addeventListener) } อื่นถ้า (obj.attachevent) {obj.attachevent ('on' + entyType, fn); } else {obj ['on' + eventtype] = fn; }}, // ส่งคืนวัตถุเหตุการณ์ getEvent: ฟังก์ชั่น (เหตุการณ์) {return event || window.event; // return event? เหตุการณ์: window.event; }, // ส่งคืนวัตถุเหตุการณ์เป้าหมาย getTarget: ฟังก์ชั่น (เหตุการณ์) {return event.target || Event.srcobj; }, PreventDefault: ฟังก์ชั่น (เหตุการณ์) {if (event.preventDefault) {event.preventDefault (); } else {event.returnValue = false; }}, RemoveListener: function (obj, EventType, fn) {ถ้า (obj.removeeVentListener) {obj.removeeVentListener (Eventtype, fn, false); } อื่นถ้า (obj.deattachevent) {obj.detachevent (EventType, FN); } else {obj ['on' + eventtype] = null; }}, stoppropagation: ฟังก์ชั่น (เหตุการณ์) {ถ้า (ente.stoppropagation) {event.stoppropagation (); } else {event.cancelBubble = true; - </script> </head> <body> <อินพุต EventType = "ปุ่ม" value = "คลิกฉัน" id = "btn"/> <p> เหตุการณ์ </p> <a> สวัสดีคำ! var target = eventutil.getTarget (เหตุการณ์); การแจ้งเตือน ("ฉันชื่อ Kock"); การแจ้งเตือน (Event.eventType); การแจ้งเตือน (เป้าหมาย); Eventutil.stoppropagation (เหตุการณ์); } ฟังก์ชั่น getBodyListen (เหตุการณ์) {แจ้งเตือน ("คลิกร่างกาย"); } ฟังก์ชั่น getLinkListen (เหตุการณ์) {แจ้งเตือน ("ป้องกันเหตุการณ์เริ่มต้น"); var event = eventutil.getEvent (เหตุการณ์); Eventutil.PreventDefault (เหตุการณ์); } window.onload = function () {var btn = document.getobjbyid ("btn"); var link = document.getobjsbytagname ("a") [0]; eventutil.addlistener (btn, "คลิก", addbtnlisten); eventutil.addlistener (document.body, "คลิก", getbodyListen); Eventutil.addListener (ลิงก์, "คลิก", getLinkListen); } </script> </body> </html>วิธีการข้างต้นสามารถแก้ปัญหาเหตุการณ์ข้ามแพลตฟอร์มได้ ถัดไปมาดูคุณสมบัติของ Charcode
ก่อนอื่นกำหนดวิธีการใหม่สำหรับ EventUtil, FormatEvent, ยอมรับพารามิเตอร์นั่นคือวัตถุเหตุการณ์
EventUt.FormateVent = function (เหตุการณ์) {ถ้า (isie && iswin) --- การตรวจจับปัญหาเบราว์เซอร์ {event.charcode = (event.type == "keypress")? event.keycode: 0; Event.eventPhase = 2;-หมายถึงเฟสเดือดรวมเช่นรองรับเฟสเดือดเดียว} เหตุการณ์ return;}2. เกี่ยวกับเป้าหมายเดือดและปัจจุบัน
เป้าหมายอยู่ในขั้นตอนเป้าหมายของสตรีมเหตุการณ์ CurrentTarget อยู่ในขั้นตอนการจับภาพเป้าหมายและฟองสบู่ของสตรีมเหตุการณ์ เฉพาะเมื่อสตรีมเหตุการณ์อยู่ในขั้นตอนเป้าหมายตัวชี้ทั้งสองจะเหมือนกันและเมื่ออยู่ในขั้นตอนการจับและฟองสบู่จะชี้ไปที่วัตถุที่ถูกคลิกและจุดเป้าหมายปัจจุบันไปยังผู้ปกครองของเหตุการณ์ปัจจุบัน
<div id = "outer" style = "พื้นหลัง:#099"> <p> ฉันคือเป้าหมาย div </p> ---- คลิกส่วนนี้, เอาต์พุต: e.target.tagname: p || E.CurrentTarget.tagname: div <p id = "inner" style = "พื้นหลัง:#9c0"> ฉันเป็นเป้าหมาย p </p> --- คลิกส่วนนี้, เอาต์พุต: e.target.tagname: p || E.CurrentTarget.tagname: Div <br> --- คลิกส่วนนี้, เอาต์พุต: e.target.tagname: div || E.CurrentTarget.tagname: Div </div> // ดูคอลัมน์การเปลี่ยนแปลงครั้งที่สอง: <div id = "outer" style = "ความเป็นมา:#099"> <div> ฉันคือเป้าหมาย Div </div> ---- คลิกส่วนนี้ E.CurrentTarget.tagname: div <p id = "inner" style = "พื้นหลัง:#9c0"> ฉันเป็นเป้าหมาย p </p> --- คลิกส่วนนี้, เอาต์พุต: e.target.tagname: p || E.CurrentTarget.tagname: Div <br> --- คลิกส่วนนี้, เอาต์พุต: e.target.tagname: div || E.CurrentTarget.tagname: Div </div>
ฟังก์ชั่น getObj (id) {return document.getElementById (id); } ฟังก์ชั่น addEvent (obj, event, fn) {ถ้า (window.attachevent) {obj.attachevent ("on" + เหตุการณ์, fn); } อื่นถ้า (window.addeventListener) {obj.addeventListener (เหตุการณ์, fn, false); }} การทดสอบฟังก์ชั่น (e) {การแจ้งเตือน ("e.target.tagname:" + e.target.tagname + "/n e.currentTarget.tagname:" + e.currentTarget.tagname); } var outer = getObj ("ภายนอก"); var inner = getObj ("inner"); // addevent (ภายใน, "คลิก", ทดสอบ); addevent (ด้านนอก, "คลิก", ทดสอบ);3. ความแตกต่างระหว่าง IE และ DOM
คนเลี้ยงสัตว์
รับ target event.target event.srcelement
รับรหัสอักขระ Event.charcode event.keycode
บล็อกเหตุการณ์พฤติกรรมเริ่มต้น prevetdefault () event.returnvalue = false
Bubble Event.stoppropagation () Event.cancelBubble = true
เกี่ยวกับการปิดกั้นพฤติกรรมเริ่มต้นตัวอย่างเช่นเมื่อผู้ใช้คลิกขวาที่เมาส์หากคุณไม่ต้องการให้เมนูปรากฏขึ้นคุณสามารถใช้การปิดกั้นพฤติกรรมเริ่มต้น:
document.body.oncontextmenu = ฟังก์ชั่น (เหตุการณ์) {ถ้า (isie) {var oevent = window.event; OEVENT.RETURNVALUE = FALSE; // มันยังสามารถส่งคืนเท็จโดยตรง; ป้องกันพฤติกรรมเริ่มต้น} else {oEvent.preventDefault (); -4. เหตุการณ์เมาส์
<p> ใช้เมาส์ของคุณเพื่อคลิกและดับเบิลคลิกที่จัตุรัสสีแดง </p> <div onmouseover = "handleEvent (เหตุการณ์)" onMouseOut = "handleEvent (เหตุการณ์)" onMousedown = "handleEvent (เหตุการณ์)" onMouseUp = "handlevent (เหตุการณ์) id = "txt1" rows = "5" cols = "45"> </textarea> </p> <!-การตรวจจับเหตุการณ์แป้นพิมพ์-> <p> <อินพุต type = "text" id = "กล่องข้อความ" onkeydown = "เหตุการณ์) cols = "45"> </textarea> </p>
ไฟล์ JS มีดังนี้:
Function HandleEvent (เหตุการณ์) {var otext = document.getElementById ('txt1'); otext.value+= "/n"+Event.type; otext.value+= "/n เป้าหมายคือ"+(event.srcelement || event.target) .id; otext.value+= "/n ที่ ("+event.clientx+","+event.clienty+") ในไคลเอนต์"; otext.value+= "/n ปุ่มลงคือ"+event.button; var arrkeys = []; otext.value+= "/n ที่เกี่ยวข้องกับเป้าหมายคือ"+event.relatedTarget.tagname; //event.relatedTarget.tagname สามารถกำหนดแหล่งที่มาและแหล่งที่มาของการจัดการฟังก์ชั่นเมาส์} (เหตุการณ์) {var otext2 = document.getElementById ('txt2'); otext2.value+= "/n"+event.type; var arrkeys = []; if (event.shiftkey) {arrkeys.push ("shift");} ถ้า (event.ctrlkey) {arrkeys.push ("ctrl");} if (event.altkey) {arrkeys.push ("alt");ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน