Разница между e.target и e.currentTarget

Ответ 1

Бен полностью прав в своем ответе - так держите то, что он говорит в виду. То, что я собираюсь рассказать вам, не является полным объяснением, но это очень простой способ запомнить, как 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" .

Ответ 2

e.target - это то, что запускает диспетчер событий, и e.currentTarget - это то, к чему вы назначили слушателя.

Ответ 3

e.currentTarget - это всегда элемент, на который фактически связано событие. e.target - это элемент, из которого возникло событие, поэтому e.target может быть дочерним элементом e.currentTarget, или e.target может быть === e.currentTarget, в зависимости от того, как структурирована ваша разметка.

Ответ 4

Мне нравятся визуальные ответы.

Когда вы нажимаете #btn, #btn два обработчика событий, и они выводят то, что вы видите на картинке.

Демо здесь: https://jsfiddle.net/ujhe1key/

Ответ 5

Стоит отметить, что event.target может быть полезен, например, для использования одного прослушивателя для запуска различных действий. Скажем, у вас есть типичный "меню" спрайт с 10 кнопками внутри, поэтому вместо того, чтобы делать:

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

Вы можете просто сделать:

menu.addEventListener(MouseEvent.CLICK, doAction);

И активируйте другое действие в doAction (event) в зависимости от event.target(используя его свойство name и т.д.)

Ответ 6

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

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" появятся!

Ответ 7

e.currentTarget всегда будет возвращать компонент, на который добавлен прослушиватель событий.

С другой стороны, e.target может быть самим компонентом или любым прямым ребенком или великим ребенком или grand-grand-child и т.д., кто получил это событие. Другими словами, e.target возвращает компонент, который находится сверху в иерархии списка отображения, и должен находиться в дочерней иерархии или самом компоненте.

Одно использование может быть, когда у вас есть несколько изображений в холсте, и вы хотите перетаскивать изображения внутри компонента, но Canvas. Вы можете добавить слушателя на Canvas и в этом слушателе вы можете написать следующий код, чтобы убедиться, что Canvas не будет перетаскиваться.

function dragImageOnly(e:MouseEvent):void
{
    if(e.target==e.currentTarget)
    {
        return;
     }
     else
     {
        Image(e.target).startDrag();
     }
}

Ответ 8

• e.target - это элемент, который вы, т.е. нажмите
• e.currentTarget - это элемент с добавленным прослушивателем событий.

Если вы нажмете на дочерний элемент кнопки, лучше использовать currentTarget для обнаружения атрибутов кнопок, в CH иногда используется проблема с e.target.

Ответ 9

e.currentTarget - это элемент (родительский), где зарегистрировано событие, e.target - это узел (дети), на который указывает событие.

Ответ 10

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.