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.


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


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


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.



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


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!


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();
     }
}

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.

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.


0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.