Разница между 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 (используя его свойство name и т. Д.)

сделать пример:

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, и в этом прослушивателе вы можете написать следующий код, чтобы 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 - это элемент (родитель), где регистрируется событие, e.target - это узел (потомки), на который указывает событие.