Perbedaan antara e.target dan e.currentTarget

Saya tidak mengerti perbedaannya, mereka berdua tampak sama tetapi saya kira mereka tidak sama.

Contoh kapan menggunakan satu atau yang lain akan dihargai.

Ben sepenuhnya benar dalam jawabannya - jadi ingatlah apa yang ia katakan. Apa yang akan saya sampaikan kepada Anda bukanlah penjelasan lengkap, tetapi ini adalah cara yang sangat mudah untuk mengingat caranya e.target, e.currentTargetbekerja dalam kaitannya dengan peristiwa mouse dan daftar tampilan:

e.target= Benda di bawah mouse (seperti kata ben ... benda yang memicu peristiwa). e.currentTarget= Hal sebelum titik ... (lihat di bawah)

Jadi, jika Anda memiliki 10 tombol di dalam klip dengan nama instance "btns" dan Anda melakukannya:

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.targetakan menjadi salah satu dari 10 tombol dan e.currentTargetakan selalu menjadi klip "btns".

Perlu dicatat bahwa jika Anda mengubah MouseEvent menjadi ROLL_OVER atau menyetel properti btns.mouseChildrenmenjadi false, e.targetdan e.currentTargetkeduanya akan selalu "btns".

e.targetadalah apa yang memicu pengirim acara untuk memicu dan e.currentTargetapa yang Anda tetapkan pendengar Anda.

e.currentTargetselalu elemen acara sebenarnya terikat lakukan. e.targetadalah elemen asal acara, jadi e.targetbisa jadi anak e.currentTarget, atau e.targetbisa === e.currentTarget, tergantung pada bagaimana markup Anda disusun.

Saya suka jawaban visual.

Ketika Anda mengklik #btn, dua penangan acara dipanggil dan mereka menampilkan apa yang Anda lihat dalam gambar.

Demo di sini: https://jsfiddle.net/ujhe1key/

Perlu dicatat bahwa event.target dapat bermanfaat, misalnya, karena menggunakan pendengar tunggal untuk memicu tindakan yang berbeda. Katakanlah Anda memiliki sprite "menu" khas dengan 10 tombol di dalamnya, jadi alih-alih melakukan:

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

Anda bisa melakukannya:

menu.addEventListener(MouseEvent.CLICK, doAction);

Dan memicu tindakan berbeda di dalam doAction (acara) tergantung pada event.target (menggunakan properti namanya, dll ...)

buat contoh:

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

ketika Anda mengklik 'btn', dan 'benar' dan 'benar' akan muncul!

e.currentTarget akan selalu mengembalikan komponen yang ditambahkan pendengar acara.

Di sisi lain, e.target dapat menjadi komponen itu sendiri atau anak langsung atau cucu atau cicit dan seterusnya yang menerima acara tersebut. Dengan kata lain, e.target mengembalikan komponen yang ada di atas dalam hierarki Daftar Tampilan dan harus dalam hierarki anak atau komponen itu sendiri.

Satu penggunaan bisa ketika Anda memiliki beberapa Gambar di Kanvas dan Anda ingin menyeret Gambar di dalam komponen tetapi Kanvas. Anda bisa menambahkan pendengar di Kanvas dan di pendengar itu Anda dapat menulis kode berikut untuk memastikan bahwa Kanvas tidak akan diseret.

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 adalah elemen, yang Anda klik
• e.currentTarget adalah elemen dengan tambahan pendengar acara.

Jika Anda mengeklik elemen turunan tombol, lebih baik menggunakan currentTarget untuk mendeteksi atribut tombol, di CH terkadang masalah menggunakan e.target.

e.currentTarget adalah elemen (orang tua) tempat acara terdaftar, e.target adalah simpul (anak-anak) tempat acara diarahkan.