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

277

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

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

Artemix
источник
2
Эта скрипка очень четко показывает разницу
Murhaf Sousli
1
Кто-нибудь знает ActionScript3 достаточно хорошо, чтобы подтвердить, что его события ведут себя так же, как события DOM?
Бен Криси
2
Эквивалент JavaScript: stackoverflow.com/questions/10086427/…
Бен Криси
Ссылка, предоставленная Мурхафом Сусли, является чистым объяснением, отвечающим на вопрос о том, в чем разница. Небольшая упрощенная версия этой скрипки будет лучшим ответом.
Азакгаим

Ответы:

205

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

Zevan
источник
2
Таким образом, другими словами, target - это childs, а currentTarget - это контейнеры.
Артемикс
107
Нет, currentTargetобъект всегда слушает событие; targetфактическая цель, которая получила событие. Для каждого всплывающего события, цель получает событие и всплывает список отображения. (Или наоборот для захвата событий)
ткни
4
Если это был ребенок, который отправил событие, тогда да, цели - это дети. Обычно вы захотите использовать e.currentTarget, так как это то, что вы назначили слушателю. Но в ситуациях, таких как Zevan, перечисленных выше, когда вы хотите, чтобы один слушатель находился в контейнере с несколькими дочерними элементами, вы затем использовали бы e.target, чтобы увидеть, какой из дочерних элементов отправил событие.
Бен Гейл
комментарий от @poke выше - лучший ответ: «currentTarget - это всегда прослушивающий объект, target - это фактическая цель, получившая событие»
PandaWood,
28

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

Алекс К
источник
25

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

введите описание изображения здесь

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

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

Мария Инес Парнисари
источник
Вопрос об AS3, а не JS.
Артемикс
1
Ах, хорошо, извините за пометки. Ответ все еще относится к обоим, хотя.
Мария Инес Парнисари
8

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

песчаная отмель
источник
5

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

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

Юань Чжаохо
источник
3

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();
     }
}
Асад
источник
3
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.
Мутукришнан Кандасами
источник
2
  • e.target - это элемент, на который вы нажимаете
  • e.currentTarget - это элемент с добавленным прослушивателем событий.

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

Марсель GJS
источник
0

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

Самяк Джайн
источник