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




events event-handling (9)

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

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

Любые примеры того, когда использовать тот или иной, были бы оценены.


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.

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


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

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


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

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

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


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


Как правило, ваш первый вариант ( preventDefault() ) - это тот, который нужно взять, но вы должны знать, в каком контексте вы находитесь и каковы ваши цели.

Fuel Your Coding имеет отличную статью о return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() .

ПРИМЕЧАНИЕ. В приведенной выше ссылке Fuel Your Coding в течение некоторого времени производится ошибка 5xx. Я нашел копию его в Интернет-архиве , распечатал его в PDF и поместил в Dropbox: архивная статья о return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() (PDF)