อะไรคือความแตกต่างระหว่าง Event.target, Event.toElement และ Event.srcElement?

ฉันมีรหัสต่อไปนี้:

document.oncontextmenu = function(evt) {
    evt = evt || window.event;
    console.log(evt.target, evt.toElement, evt.srcElement);
};

เมื่อคลิกปุ่มเมาส์ขวาบน a <div class="foo"></div>จะส่งคืนสิ่งนี้:

div.foo, div.foo, div.foo

เมื่อคลิกปุ่มเมาส์ขวาบน a <input>จะส่งคืนสิ่งนี้:

อินพุตอินพุตอินพุต

ทั้งหมดดูเหมือนจะนำมาซึ่งผลลัพธ์เดียวกัน มีสถานการณ์ใดบ้างที่หนึ่งในนั้นมีการใช้งานที่แตกต่างจากที่อื่น ๆ ?

เป้าหมายเหตุการณ์เป็นองค์ประกอบที่เหตุการณ์จะส่ง:

วัตถุที่จะซึ่งเหตุการณ์ที่มีการกำหนดเป้าหมายโดยใช้การไหลเหตุการณ์ DOM เป้าหมายเหตุการณ์คือค่าของEvent.target แอตทริบิวต์

srcElementเป็นวิธีที่ไม่ได้มาตรฐานของ IE ในการรับไฟล์target.

เป้าหมายเหตุการณ์ปัจจุบันเป็นองค์ประกอบที่มีฟังเหตุการณ์ที่ถูกเรียกในปัจจุบัน:

ในโฟลว์เหตุการณ์เป้าหมายเหตุการณ์ปัจจุบันคืออ็อบเจ็กต์ที่เชื่อมโยงกับตัวจัดการเหตุการณ์ที่กำลังถูกส่ง วัตถุนี้อาจเป็นเป้าหมายของเหตุการณ์เองหรือบรรพบุรุษของมัน เป้าหมายเหตุการณ์ปัจจุบันเปลี่ยนไปเมื่อเหตุการณ์แพร่กระจายจากวัตถุหนึ่งไปยังวัตถุผ่านขั้นตอนต่างๆของโฟลว์เหตุการณ์ เป้าหมายเหตุการณ์ปัจจุบันคือค่าของ Event.currentTargetแอตทริบิวต์

การใช้thisภายในตัวฟังเหตุการณ์เป็นวิธีทั่วไป (และมาตรฐาน) ในการรับเป้าหมายเหตุการณ์ปัจจุบัน

กิจกรรมบางประเภทมีrelatedTarget:

ใช้เพื่อระบุรองEventTargetที่เกี่ยวข้องกับเหตุการณ์ UI ขึ้นอยู่กับประเภทของเหตุการณ์

fromElementและtoElementเป็นวิธีที่ไม่ได้มาตรฐานของ IE ในการขอรับไฟล์relatedTarget.