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

Question

Я не понимаю разницы, они оба кажутся одинаковыми, но я думаю, что это не так.

Буду признателен за любые примеры использования того или другого.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

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

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

Answer 5

Стоит отметить, что 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 и т.д ...)

Answer 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»!

Answer 7

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

Answer 8

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

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

Answer 9

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.

Answer 10

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