เหตุการณ์ในเบราว์เซอร์ทั้งหมดมีอยู่ในรูปแบบของวัตถุ ในทำนองเดียวกันยังมีความแตกต่างในการรับวัตถุเหตุการณ์ระหว่างเบราว์เซอร์ IE และเบราว์เซอร์ DOM มาตรฐาน ในเบราว์เซอร์ IE วัตถุเหตุการณ์เป็นเหตุการณ์แอตทริบิวต์ของวัตถุ Windows วิธีการต่อไปนี้มักจะใช้ในการเข้าถึง
การคัดลอกรหัสมีดังนี้:
op.onclick = function () {
var oEvent = window.event;
-
แม้ว่ามันจะเป็นคุณสมบัติของวัตถุหน้าต่าง แต่วัตถุเหตุการณ์สามารถเข้าถึงได้ก็ต่อเมื่อเหตุการณ์เกิดขึ้นเท่านั้น หลังจากฟังก์ชั่นการจัดการเหตุการณ์ทั้งหมดถูกดำเนินการวัตถุจะหายไป
DOM มาตรฐานกำหนดว่าวัตถุเหตุการณ์จะต้องส่งผ่านไปยังฟังก์ชั่นการประมวลผลเหตุการณ์เป็นพารามิเตอร์ที่ไม่ซ้ำกัน การเข้าถึงวัตถุเหตุการณ์ในเบราว์เซอร์ Firefox ครั้งหนึ่งมักจะใช้เป็นพารามิเตอร์และรหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
op.onclick = function (oEvent) {
-
ดังนั้นเพื่อให้เข้ากันได้กับเบราว์เซอร์ทั้งสองวิธีการต่อไปนี้มักจะใช้
การคัดลอกรหัสมีดังนี้:
op.onclick = function (oEvent) {
if (window.event) oEvent = window.event;
-
หลังจากได้รับวัตถุเหตุการณ์เบราว์เซอร์สามารถจัดการเหตุการณ์ต่าง ๆ ผ่านชุดคุณสมบัติและวิธีการเช่นเหตุการณ์เมาส์เหตุการณ์แป้นพิมพ์และเหตุการณ์เบราว์เซอร์ รอ
รายการคุณสมบัติและวิธีการทั่วไปต่อไปนี้:
จากด้านบนเราจะเห็นว่าเบราว์เซอร์สองประเภทยังคงมีความคล้ายคลึงกัน ตัวอย่างเช่นแอตทริบิวต์ประเภทเข้ากันได้กับเบราว์เซอร์ต่างๆ มันบ่งบอกถึงประเภทของเหตุการณ์และส่งคืนค่าเช่น "คลิก" และ "Mousemove"
สิ่งนี้มีประโยชน์มากสำหรับการจัดการเหตุการณ์หลายประเภทในฟังก์ชั่นเดียวกัน
ดังนี้: ฟังก์ชั่นเดียวกันจัดการกับหลายเหตุการณ์
การคัดลอกรหัสมีดังนี้:
<ภาษาสคริปต์ = "JavaScript">
มือจับฟังก์ชั่น (oEvent) {
var disp = document.getElementById ("แสดง");
if (window.event) oEvent = window.event; // จัดการความเข้ากันได้และรับวัตถุ
if (oevent.type == "คลิก")
disp.innerhtml += "คุณคลิกที่ฉัน!";
อย่างอื่นถ้า (oevent.type == "Mouseover"))
disp.innerhtml += "คุณย้ายไปหาฉัน";
-
window.onload = function () {
var op = document.getElementById ("Box");
op.onclick = handle;
op.onmouseover = handle;
-
</script>
<div>
<div id = "box"> </div>
<p id = "display"> คลิกฉัน </p>
</div>
รหัสด้านบนเพิ่มฟังก์ชั่นการตอบสนองเหตุการณ์สองรายการลงใน div ของ id = "กล่อง" และเหตุการณ์ทั้งสองนี้เป็นฟังก์ชั่นเดียวกัน
ในฟังก์ชั่นนี้ก่อนอื่นให้พิจารณาการได้รับวัตถุเหตุการณ์ที่เข้ากันได้แล้วใช้ดิสก์แอตทริบิวต์ประเภทไปยังชื่อของเหตุการณ์
เมื่อตรวจจับสามปุ่มของ Shift, Alt, และ Ctrl วิธีการที่เบราว์เซอร์สองประเภทใช้นั้นเหมือนกันทั้งคู่มีคุณสมบัติสามอย่างของ ShiftKey, Altkey และ Ctrlkey
รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var bshift = oEvent.ShiftKey;
var balt = oevent.altkey;
var bctrl = oevent.ctrlkey;
นอกจากนี้เมื่อได้รับพอยน์เตอร์เมาส์วิธีที่ใช้โดยเบราว์เซอร์ทั้งสองประเภทจะเหมือนกันทั้งสองอย่างนี้รวมถึงไคลเอนต์, ไคลเอนต์, หน้าจอและหน้าจอ
ในหมู่พวกเขาลูกค้าและลูกค้าเป็นตัวแทนของที่ตั้งของเมาส์ในพื้นที่ลูกค้าและไม่รวมแถบสถานะของเบราว์เซอร์แถบเมนู ฯลฯ
รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var iclientx = oeVent.Clientx;
var iclienty = oeVent.Clienty;
ScreenX และ Screeny อ้างถึงตำแหน่งของเมาส์บนหน้าจอคอมพิวเตอร์ทั้งหมดและรหัสคือ
การคัดลอกรหัสมีดังนี้:
var iScreenx = oeVent.screenx;
var iScreeny = oEvent.Screeny;
หลายครั้งที่นักพัฒนาต้องการทราบว่าเหตุการณ์นั้นเกิดจากวัตถุนั้นนั่นคือเป้าหมายของเหตุการณ์
สมมติว่าองค์ประกอบ <p> จัดสรรฟังก์ชันตัวจัดการเหตุการณ์ onclick, <p> จะได้รับการพิจารณาว่าเป็นเป้าหมายเมื่อเหตุการณ์การคลิกถูกทริกเกอร์
ในเบราว์เซอร์ IE เป้าหมายมีอยู่ในคุณสมบัติ SRCELEMENT ของวัตถุเหตุการณ์รหัสมีดังนี้
การคัดลอกรหัสมีดังนี้: var otarget = oEvent.srcelement;
ในเบราว์เซอร์ DOM มาตรฐานเป้าหมายจะรวมอยู่ในแอตทริบิวต์เป้าหมายรหัสมีดังนี้
การคัดลอกรหัสมีดังนี้: var otarget = oEvent.target;
รับเป้าหมายของเหตุการณ์
การคัดลอกรหัสมีดังนี้:
<ภาษาสคริปต์ = "JavaScript">
มือจับฟังก์ชั่น (oEvent) {
var disp = document.getElementById ("แสดง");
if (window.event) oEvent = window.event; // จัดการความเข้ากันได้และรับวัตถุ
var otarget;
if (oevent.srcelement) // จัดการความเข้ากันได้และรับกิจกรรม
otarget = oevent.srcelement;
อื่น
otarget = oevent.target;
disp.innerhtml + = "ชื่อองค์ประกอบ:" + otarget.tagname + "<br>" + "เนื้อหาองค์ประกอบ:" + otarget.TextContent + "<br>"
+ "โหนดต่อไปนี้:" + otarget.TextContent + "<br>"
-
-
window.onload = function () {
var op = document.getElementById ("Box");
op.onclick = handle;
-
</script>
<div>
<div id = "box">
เนื้อหากล่อง
</div>
<p id = "display"> </p>
</div>
(ภาคผนวก) คุณสมบัติของวัตถุองค์ประกอบ http://www.w3school.com.cn/xmldom/dom_element.asp
(ภาคผนวก) วิธีการของวัตถุองค์ประกอบ http://www.w3school.com.cn/xmldom/dom_element.asp
เนื่องจากเป้าหมายของเหตุการณ์แตกต่างกันในเบราว์เซอร์สองประเภทรหัสจะต้องตรวจสอบให้แน่ใจว่าเข้ากันได้ การปฏิบัติตามปกติคือการใช้วัตถุโดยตรงเป็นเงื่อนไขของคำสั่ง IF รหัสมีดังนี้
การคัดลอกรหัสมีดังนี้:
if (oevent.srcelement)
otarget = oevent.srcelement;
อื่น
otarget = oevent.target;
วิธีนี้ใช้กันทั่วไปในคุณสมบัติอื่น ๆ