E.target ve e.currentTarget arasındaki fark

Farkı anlamıyorum, ikisi de aynı görünüyor ama sanırım öyle değiller.

Birini veya diğerini ne zaman kullanacağınıza dair herhangi bir örnek takdir edilecektir.

Ben cevabında tamamen doğrudur - bu yüzden söylediklerini aklınızda bulundurun. Sana anlatmaya üzereyim tam açıklama değildir, ancak nasıl hatırlamak çok kolay bir yolu var e.target, e.currentTargetiş fare olayları ve görüntüleme listesine göre:

e.target= Farenin altındaki şey (ben'in dediği gibi ... olayı tetikleyen şey). e.currentTarget= Noktadan önceki şey ... (aşağıya bakınız)

Dolayısıyla, bir klip içinde örnek adı "btns" olan 10 düğme varsa ve şunları yaparsınız:

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.target10 düğmeden biri olacak ve e.currentTargether zaman "btns" klibi olacaktır.

MouseEvent'i bir ROLL_OVER olarak değiştirirseniz veya özelliği btns.mouseChildrenfalse olarak ayarlarsanız e.targetve e.currentTargether ikisinin de her zaman "btns" olacağını belirtmek gerekir.

e.targetolay göndericinin tetiklemesini tetikleyen e.currentTargetşeydir ve dinleyicinizi atadığınız şeydir.

e.currentTargether zaman olayın aslında bağlı olduğu öğedir. e.targetolayın kaynağı olan öğedir, bu nedenle işaretlemenizin nasıl yapılandırıldığına bağlı olarak e.targetalt öğesi olabilir e.currentTargetveya e.target=== olabilir e.currentTarget.

Görsel cevapları severim.

Tıkladığınızda #btn, iki olay işleyici çağrılır ve resimde gördüklerinizi çıktılar.

Burada demo: https://jsfiddle.net/ujhe1key/

Event.target öğesinin, örneğin farklı eylemleri tetiklemek için tek bir dinleyici kullanmak için yararlı olabileceğini belirtmek gerekir. Diyelim ki içinde 10 düğmeli tipik "menü" hareketli grafiğiniz var, bunu yapmak yerine:

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

Sadece şunları yapabilirsiniz:

menu.addEventListener(MouseEvent.CLICK, doAction);

Ve event.target öğesine bağlı olarak doAction (event) içinde farklı bir işlemi tetikleyin (name özelliğini kullanarak, vb.)

örnek ver:

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' düğmesini tıkladığınızda 'true' ve 'true' görünecektir!

e.currentTarget her zaman olay dinleyicisinin eklendiği bileşeni döndürür.

Öte yandan, e.target bileşenin kendisi veya herhangi bir doğrudan çocuk veya büyük çocuk veya büyük-büyük çocuk vb. Olabilir. Başka bir deyişle, e.target, Görüntüleme Listesi hiyerarşisinde en üstteki bileşeni döndürür ve alt hiyerarşisinde veya bileşenin kendisinde olmalıdır.

Tuvalde birden fazla Görüntünüz olduğunda ve Görüntüleri bileşenin içine değil Tuval'e sürüklemek istediğinizde bir kullanım olabilir. Canvas'a bir dinleyici ekleyebilirsiniz ve bu dinleyicide Canvas'ın sürüklenmemesini sağlamak için aşağıdaki kodu yazabilirsiniz.

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, tıkladığınız bir öğedir
• e.currentTarget, eklenen olay dinleyicisine sahip öğedir.

Düğmenin alt öğesini tıklatırsanız, CHT'de e.target kullanmak bazen sorun olan öznitelikleri algılamak için currentTarget kullanmak daha iyidir.

e.currentTarget, olayın kaydedildiği öğe (üst), e.target ise olayın işaret ettiği düğüm (alt öğe).