การอ่านที่เกี่ยวข้อง:
JavaScript เหตุการณ์สรุปการเรียนรู้ (V) ประเภทเหตุการณ์เมาส์ใน JS
//www.vevb.com/article/86259.htm
สรุปเหตุการณ์ JavaScript การเรียนรู้ (i) เหตุการณ์เหตุการณ์
//www.vevb.com/article/86261.htm
สรุปเหตุการณ์การเรียนรู้ JavaScript (IV) สมาชิกสาธารณะของเหตุการณ์ (คุณสมบัติและวิธีการ)
//www.vevb.com/article/86262.htm
JavaScript เหตุการณ์สรุปการเรียนรู้ (ii) JS Event Handler
//www.vevb.com/article/86264.htm
JavaScript เหตุการณ์สรุปการเรียนรู้ (iii) วัตถุเหตุการณ์ JS
//www.vevb.com/article/86266.htm
1. วัตถุเหตุการณ์
1. เข้าใจวัตถุเหตุการณ์
เหตุการณ์มีอยู่ในเบราว์เซอร์เป็นวัตถุเช่นเหตุการณ์ การเรียกเหตุการณ์จะสร้างเหตุการณ์วัตถุเหตุการณ์ซึ่งมีข้อมูลทั้งหมดที่เกี่ยวข้องกับเหตุการณ์ รวมองค์ประกอบที่ส่งผลให้เกิดเหตุการณ์ประเภทของเหตุการณ์และข้อมูลอื่น ๆ ที่เกี่ยวข้องกับเหตุการณ์เฉพาะ
ตัวอย่างเช่น: เหตุการณ์ที่สร้างโดยการดำเนินการของเมาส์จะมีข้อมูลเกี่ยวกับตำแหน่งเมาส์ เหตุการณ์ที่สร้างขึ้นโดยการดำเนินการแป้นพิมพ์จะมีข้อมูลที่เกี่ยวข้องกับคีย์ที่กด
เบราว์เซอร์ทั้งหมดสนับสนุนวัตถุเหตุการณ์ แต่วิธีการสนับสนุนแตกต่างกัน ใน DOM วัตถุเหตุการณ์จะต้องส่งผ่านไปยังฟังก์ชั่นการจัดการเหตุการณ์เป็นพารามิเตอร์ที่ไม่ซ้ำกัน ใน IE เหตุการณ์เป็นคุณลักษณะของวัตถุหน้าต่าง
2. เหตุการณ์ในตัวจัดการเหตุการณ์ HTML
<อินพุต id = "btn" type = "button" value = "คลิก" onclick = "console.log ('html handler เหตุการณ์ html'+event.type)"/>สิ่งนี้สร้างฟังก์ชั่นที่มีเหตุการณ์ตัวแปรท้องถิ่น วัตถุเหตุการณ์สามารถเข้าถึงได้โดยตรงผ่านเหตุการณ์
3. วัตถุเหตุการณ์ใน DOM
ตัวจัดการเหตุการณ์ที่ระดับ DOM0 และระดับ DOM2 จะผ่านเหตุการณ์เป็นพารามิเตอร์
<body> <อินพุต id = "btn" type = "ปุ่ม" value = "คลิก"/> <script> var btn = document.getElementById ("btn"); btn.onclick = ฟังก์ชั่น (เหตุการณ์) {console.log ("dom0 & คลิก"); console.log //click}btn.addeventListener("Click ", ฟังก์ชั่น (เหตุการณ์) {console.log (" dom2 & คลิก "); console.log (event.type); // คลิก}, false); </script> </body>4. วัตถุเหตุการณ์ใน IE
กรณีแรก: เมื่อเพิ่มตัวจัดการเหตุการณ์ผ่านวิธีระดับ DOM0 วัตถุเหตุการณ์จะมีอยู่เป็นแอตทริบิวต์ของวัตถุหน้าต่าง
<body> <อินพุต id = "btn" type = "ปุ่ม" value = "คลิก"/> <script> var btn = document.getElementById ("btn"); btn.onclick = function () {var event = window.event; console.log (event.type); // คลิก} </script> </body>กรณีที่สอง: ตัวจัดการเหตุการณ์เพิ่มผ่าน attaineVent () และวัตถุเหตุการณ์จะถูกส่งผ่านเป็นพารามิเตอร์
<body> <อินพุต id = "btn" type = "ปุ่ม" value = "คลิก"/> <script> var btn = document.getElementById ("btn"); btn.attachevent ("onclick", ฟังก์ชั่น (ประเภท) {console.log (event.type);แต่ฉันไม่เข้าใจสองสิ่ง
1. พารามิเตอร์เหตุการณ์สามารถส่งผ่านไปยังตัวจัดการเหตุการณ์ที่เพิ่มผ่านวิธีระดับ DOM0 ประเภทของมันเหมือนกับ window.event.type แต่พารามิเตอร์เหตุการณ์ที่ผ่านนั้นแตกต่างจาก window.event ทำไม
btn.onclick = ฟังก์ชั่น (เหตุการณ์) {var event1 = window.event; console.log ('event1.type ='+event1.type); //event1.type=clickconsole.log('event.type='+event.type); //event.type=clickconsole.log('Event1==Vent?'+(EVENT==EVENT1)); // event1 == เหตุการณ์? false}2. เหตุการณ์ที่ผ่านในตัวจัดการเหตุการณ์ที่เพิ่มผ่าน attaintEvent จะแตกต่างจาก window.event ทำไม
<body> <อินพุต id = "btn" type = "ปุ่ม" value = "คลิก"/> <script> var btn = document.getElementById ("btn"); btn.attachevent ("onclick", ฟังก์ชั่น (พิมพ์) {console.log (event.type); //clickconsole.log("event=window.event?"+(event=window.event));ข้างต้นเป็นบทสรุปของความรู้ที่เกี่ยวข้องกับเหตุการณ์ JavaScript (III) เกี่ยวกับวัตถุเหตุการณ์ JS ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดใส่ใจกับเว็บไซต์ Wulin.com!