ความแตกต่างระหว่าง e.target และ e.currentTarget

ฉันไม่เข้าใจความแตกต่างพวกเขาทั้งคู่ดูเหมือนกัน แต่ฉันคิดว่าพวกเขาไม่เหมือนกัน

ตัวอย่างใด ๆ ที่จะใช้เมื่อใดจะได้รับการชื่นชม

เบ็นถูกต้องสมบูรณ์ในคำตอบของเขา - ดังนั้นจงรักษาสิ่งที่เขาพูดไว้ในใจ สิ่งที่ฉันจะบอกคุณไม่ได้เป็นคำอธิบายที่เต็ม แต่มันเป็นวิธีที่ง่ายมากที่จะจำวิธีe.target, e.currentTargetการทำงานที่เกี่ยวข้องกับเหตุการณ์ของเมาส์และรายการแสดงผล:

e.target= สิ่งที่อยู่ใต้เม้าส์ (อย่างที่เบนบอกว่า ... สิ่งที่ทำให้เกิดเหตุการณ์) e.currentTarget= สิ่งที่อยู่ข้างหน้าจุด ... (ดูด้านล่าง)

ดังนั้นหากคุณมี 10 ปุ่มภายในคลิปที่มีชื่ออินสแตนซ์ของ "btns" และคุณ:

btns.addEventListener(MouseEvent.MOUSE_OVER, onOver);
// btns = the thing before the dot of an addEventListener call
function onOver(e:MouseEvent):void{
  trace(e.target.name, e.currentTarget.name);
}

e.targetจะเป็นหนึ่งใน 10 ปุ่มและe.currentTargetจะเป็นคลิป "btns" เสมอ

เป็นที่น่าสังเกตว่าถ้าคุณเปลี่ยน MouseEvent เป็น ROLL_OVER หรือตั้งค่าคุณสมบัติbtns.mouseChildrenเป็นเท็จe.targetและe.currentTargetทั้งสองจะเป็น "btns" เสมอ

e.targetเป็นสิ่งที่กระตุ้นให้ผู้มอบหมายงานกิจกรรมเรียกใช้และe.currentTargetเป็นสิ่งที่คุณมอบหมายให้ผู้ฟัง

e.currentTargetเป็นองค์ประกอบที่กิจกรรมผูกพันกันเสมอ e.targetเป็นองค์ประกอบของเหตุการณ์ที่เกิดขึ้นดังนั้นe.targetอาจเป็นลูกของe.currentTargetหรือe.targetอาจ === e.currentTargetขึ้นอยู่กับโครงสร้างของมาร์กอัปของคุณ

ฉันชอบคำตอบที่มองเห็น

เมื่อคุณคลิก#btnตัวจัดการเหตุการณ์สองตัวจะถูกเรียกและพวกมันจะแสดงสิ่งที่คุณเห็นในภาพ

ตัวอย่างที่นี่: https://jsfiddle.net/ujhe1key/

เป็นที่น่าสังเกตว่า event.target นั้นมีประโยชน์ตัวอย่างเช่นสำหรับการใช้ listener เพียงตัวเดียวเพื่อกระตุ้นการกระทำที่แตกต่าง สมมติว่าคุณมี "เมนู" ทั่วไปสไปรท์ที่มี 10 ปุ่มภายในดังนั้นแทนที่จะทำ:

menu.button1.addEventListener(MouseEvent.CLICK, doAction1);
menu.button2.addEventListener(MouseEvent.CLICK, doAction2);
etc...

คุณสามารถทำได้โดยง่าย:

menu.addEventListener(MouseEvent.CLICK, doAction);

และทริกเกอร์การกระทำที่แตกต่างกันภายใน doAction (เหตุการณ์) ขึ้นอยู่กับ event.target (โดยใช้คุณสมบัติชื่อเป็นต้น)

ทำตัวอย่าง:

var body = document.body,
    btn = document.getElementById( 'id' );
body.addEventListener( 'click', function( event ) {
    console.log( event.currentTarget === body );
    console.log( event.target === btn );
}, false );

เมื่อคุณคลิก 'btn' และจะปรากฏ 'true' และ 'true'!

e.currentTarget จะส่งคืนองค์ประกอบไปยังที่เพิ่มฟังเหตุการณ์เสมอ

ในทางกลับกัน e.target สามารถเป็นองค์ประกอบเองหรือลูกโดยตรงหรือเด็กใหญ่หรือ grand-grand-child และอื่น ๆ ที่ได้รับเหตุการณ์ กล่าวอีกนัยหนึ่ง e.target ส่งคืนองค์ประกอบซึ่งอยู่ด้านบนในลำดับชั้นของรายการที่แสดงและจะต้องอยู่ในลำดับชั้นของเด็กหรือองค์ประกอบเอง

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

function dragImageOnly(e:MouseEvent):void
{
    if(e.target==e.currentTarget)
    {
        return;
     }
     else
     {
        Image(e.target).startDrag();
     }
}

target  is the element that triggered the event (e.g., the user clicked on)

currenttarget is the element that the event listener is attached to.

• e.target เป็นองค์ประกอบที่คุณต้องคลิก
• e.currentTarget เป็นองค์ประกอบที่มีฟังเหตุการณ์เพิ่ม

หากคุณคลิกที่องค์ประกอบลูกของปุ่มมันจะดีกว่าถ้าใช้ currentTarget เพื่อตรวจสอบคุณสมบัติของปุ่มในบางครั้ง CH อาจมีปัญหาในการใช้ e.target

e.currentTarget เป็นองค์ประกอบ (หลัก) ที่มีการลงทะเบียนเหตุการณ์, e.target คือโหนด (เด็ก) ที่มีการชี้เหตุการณ์