การอ่านที่เกี่ยวข้อง:
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
1. สมาชิกสาธารณะของวัตถุเหตุการณ์
1. สมาชิกสาธารณะของเหตุการณ์ใน DOM
วัตถุเหตุการณ์มีคุณสมบัติและวิธีการที่เกี่ยวข้องกับเหตุการณ์เฉพาะที่สร้างขึ้น ประเภทของเหตุการณ์ที่เกิดขึ้นนั้นแตกต่างกันและคุณสมบัติและวิธีการที่มีอยู่นั้นแตกต่างกัน อย่างไรก็ตามเหตุการณ์ทั้งหมดใน DOM มีสมาชิกสาธารณะต่อไปนี้
. การเปรียบเทียบ CurrentTarget และ Target
ภายในตัวจัดการเหตุการณ์วัตถุนี้จะเท่ากับค่าของเป้าหมายปัจจุบันเสมอและเป้าหมายก็มีเป้าหมายจริงของเหตุการณ์
ตัวอย่างเช่น: มีปุ่มบนหน้าลงทะเบียนเหตุการณ์คลิกในร่างกาย (โหนดหลักของปุ่ม) เมื่อมีการคลิกปุ่มเหตุการณ์การคลิกจะฟองไปยังร่างกายสำหรับการประมวลผล
<body> <อินพุต id = "btn" type = "button" value = "คลิก"/> <script> document.body.onclick = ฟังก์ชั่น (เหตุการณ์) {console.log ("คลิกเหตุการณ์ที่ลงทะเบียนในร่างกาย"); console.log ("this === event.currenttarget?"+(this === event.currenttarget)); // จริง console.log ("currenttarget === document.body?"+(event.currentTarget === document.body)); // true console.log ('event.target === document.getElementById ("btn")?'+(event.target === document.getElementById ("BTN"))); // true} </script> </body>ผลการทำงานคือ:
ข. ผ่านแอตทริบิวต์ประเภทสามารถจัดการเหตุการณ์หลายเหตุการณ์ในฟังก์ชั่น
หลักการ: เหตุการณ์ที่แตกต่างกันได้รับการจัดการที่แตกต่างกันโดยการตรวจจับเหตุการณ์คุณลักษณะประเภท
ตัวอย่างเช่น: กำหนดฟังก์ชั่นตัวจัดการเพื่อจัดการเหตุการณ์ 3 ประเภท: คลิก, MouseOver, Mouseout
<body> <อินพุต id = "btn" type = "ปุ่ม" value = "คลิก"/> <script> var handler = function (เหตุการณ์) {switch (event.type) {กรณี "คลิก": การแจ้งเตือน ("คลิก"); หยุดพัก; กรณี "MouseOver": Event.target.style.backgroundColor = "Pink"; หยุดพัก; กรณี "mouseout": event.target.style.backgroundColor = ""; - var btn = document.getElementById ("btn"); btn.onclick = Handler; btn.onmouseover = handler; btn.onmouseout = handler; </script> </body>รันเอฟเฟกต์: คลิกปุ่มและกล่องจะปรากฏขึ้น เมื่อเมาส์ผ่านปุ่มสีพื้นหลังของปุ่มจะกลายเป็นสีชมพู เมื่อเมาส์ออกจากปุ่มสีพื้นหลังจะกลับสู่ค่าเริ่มต้น
ค. การเปรียบเทียบ stoppropagation () และ stopimmediatepropagation ()
เดียวกัน: stoppropagation () และ stopimmediatepropagation () สามารถใช้เพื่อยกเลิกการจับภาพเพิ่มเติมหรือเดือดร้อนของเหตุการณ์
แตกต่างกัน: ความแตกต่างระหว่างทั้งสองคือเมื่อเหตุการณ์มีตัวจัดการเหตุการณ์หลายตัว stopimmediatepropagation () สามารถป้องกันไม่ให้ตัวจัดการเหตุการณ์ถูกเรียกในภายหลัง
ตัวอย่างเช่น:
<body> <อินพุต id = "btn" type = "ปุ่ม" value = "คลิก"/> <script> var btn = document.getElementById ("btn"); btn.addeventListener ("คลิก", ฟังก์ชั่น (เหตุการณ์) {console.log ("buttn คลิกฟังครั้งเดียว"); // event.stoppropagation (); // การดูเอฟเฟกต์ btn.addeventListener ("คลิก", function () {console.log ("ปุ่มคลิกฟังสองครั้ง");}, false); document.body.onclick = ฟังก์ชั่น (เหตุการณ์) {console.log ("ร่างกายคลิก"); } </script> </body>เอฟเฟกต์การทำงาน:
D, EventPhase
ค่า eventphase คือ 1 ในขั้นตอนการจับภาพ 2 ในเฟสเป้าหมายและ 3 ในเฟสฟอง
ตัวอย่าง:
<body> <อินพุต id = "btn" type = "ปุ่ม" value = "คลิก"/> <script> var btn = document.getElementById ("btn"); btn.onclick = ฟังก์ชั่น (เหตุการณ์) {console.log คือ? "+event.eventphase);} btn.addeventListener (" คลิก ", ฟังก์ชั่น (เหตุการณ์) {console.log (" วิธีการปุ่มระดับ DOM2 เพิ่มตัวจัดการเหตุการณ์และค่า eventphase คือ "event.eventphase);}, true); btn.addeventlistener ตัวจัดการและค่า eventphase คือ "+event.eventphase);}, false); document.body.addeventListener ("คลิก", ฟังก์ชั่น (เหตุการณ์) {console.log ("ร่างกายเพิ่มตัวจัดการเหตุการณ์และค่า eventphase คือ"+event.eventphase);}, true); document.body.addeventListener ("คลิก" "+event.eventphase);}, false); </script>เอฟเฟกต์การทำงาน:
2. สมาชิกสาธารณะของเหตุการณ์ใน IE
คุณสมบัติและวิธีการของเหตุการณ์ใน IE จะแตกต่างกันไปตามประเภทเหตุการณ์ถึง DOM แต่บางคนเป็นสมาชิกสาธารณะที่วัตถุทั้งหมดมีและสมาชิกเหล่านี้ส่วนใหญ่มีคุณสมบัติหรือวิธีการ DOM ที่สอดคล้องกัน
ข้างต้นเป็นความรู้ที่เกี่ยวข้องของสมาชิกสาธารณะ (คุณลักษณะและวิธีการ) ของเหตุการณ์ที่บรรณาธิการแนะนำให้คุณ (IV) และฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน!