Різниця між 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на false, 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 може бути корисним, наприклад, для використання одного слухача для запуску різних дій. Скажімо, у вас є типовий спрайт "меню" з 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 може бути самим компонентом або будь-яким прямим дитиною чи онуком чи правнуком та ін., Хто отримав подію. Іншими словами, 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 є елементом (батьківським), де зареєстрована подія, напр. target - це вузол (діти), на який вказує подія.