Perbedaan antara e.target dan e.currentTarget

277

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

Contoh kapan menggunakan satu atau yang lain akan dihargai.

Artemix
sumber
2
Biola ini menunjukkan perbedaannya dengan sangat jelas
Murhaf Sousli
1
apakah ada yang tahu ActionScript3 dengan cukup baik untuk mengonfirmasi bahwa acara tersebut berperilaku sama dengan acara DOM?
Ben Creasy
2
Setara dengan JavaScript: stackoverflow.com/questions/10086427/…
Ben Creasy
Referensi yang diberikan oleh Murhaf Sousli adalah penjelasan yang bersih menjawab pertanyaan tentang apa perbedaan itu. Versi sederhana dari biola ini akan menjadi jawaban terbaik.
azakgaim

Jawaban:

205

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".

Zevan
sumber
2
Jadi, dengan kata lain, target adalah anak-anak dan Target saat ini adalah wadah.
Artemix
107
Tidak, currentTargetselalu objek mendengarkan acara; targetadalah target aktual yang menerima acara tersebut. Per peristiwa menggelegak, target menerima acara dan itu menggelembungkan daftar tampilan. (Atau sebaliknya untuk menangkap acara)
menyodok
4
Jika itu adalah anak yang mengirim acara maka target ya adalah anak-anak. Biasanya Anda ingin menggunakan e.currentTarget karena inilah yang Anda tetapkan untuk pendengar. Tetapi dalam situasi, seperti Zevan yang tercantum di atas di mana Anda ingin satu pendengar pada sebuah wadah dengan banyak anak, Anda kemudian akan menggunakan e.target untuk melihat anak-anak mana yang mengirim acara tersebut.
Ben Gale
komentar dari @poke di atas adalah jawaban terbaik "currentTarget selalu menjadi objek yang mendengarkan, target adalah target aktual yang menerima acara"
PandaWood
28

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.

Alex K
sumber
25

Saya suka jawaban visual.

masukkan deskripsi gambar di sini

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

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

Maria Ines Parnisari
sumber
Pertanyaannya adalah tentang AS3 bukan JS.
Artemix
1
Ah oke, maaf tentang pemberian tag. Jawabannya masih berlaku untuk keduanya.
Maria Ines Parnisari
8

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 ...)

Pulau karang
sumber
5

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!

Yuan Zhaohao
sumber
3

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();
     }
}
Asad
sumber
3
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.
Muthukrishnan Kandasamy
sumber
2
  • 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.

Marcel GJS
sumber
0

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

Samyak Jain
sumber