Может кто-нибудь сказать мне точную разницу между currentTarget
и target
свойством в событиях Javascript с примером и какое свойство используется в каком сценарии?
javascript
Valli69
источник
источник
Ответы:
По умолчанию события всплывают по умолчанию, поэтому разница между ними такова:
target
это элемент, который вызвал событие (например, пользователь нажал на)currentTarget
это элемент, к которому прикреплен слушатель события.Смотрите простое объяснение в этом блоге .
источник
XMLHttpRequest
target
= элемент, который вызвал событие.currentTarget
= элемент, который имеет прослушиватель событий.источник
Минимальный исполняемый пример
Если вы нажмете на:
затем
1
слушает его и добавляет к результату:потому что в этом случае:
2
это элемент, который породил событие1
это элемент, который слушал событиеЕсли вы нажмете на:
вместо этого результат:
Испытано на хроме 71.
источник
Если это не прилипает, попробуйте это:
ток в
currentTarget
относится к настоящему. Это самая последняя цель, которая поймала событие, которое вспыхнуло откуда-то еще.источник
Если щелкнуть тег P в приведенном выше коде, вы получите три предупреждения, а если щелкнуть тег div, вы получите два предупреждения и одно предупреждение при нажатии на тег формы. А теперь посмотрите следующий код,
Здесь event.target - это [объект HTMLParagraphElement], а event.curentTarget - это [объект HTMLDivElement]:
Здесь мы нажали на тег P, но у нас есть не слушатель на P, а его родительский элемент div.
источник
event.target - это узел, из которого произошло событие, т.е. где бы вы ни размещали свой прослушиватель событий (в абзаце или промежутке), event.target ссылается на узел (где пользователь щелкнул).
Напротив , event.currentTarget ссылается на узел, к которому был подключен прослушиватель текущего события. То есть. если мы прикрепили наш прослушиватель событий к узлу абзаца, то event.currentTarget ссылается на абзац, а event.target по-прежнему ссылается на span. Обратите внимание: если у нас также есть прослушиватель событий в теле, то для этого прослушивателя событий event.currentTarget ссылается на тело (т. Е. Событие, предоставляемое в качестве входных данных для списков событий, обновляется каждый раз, когда событие поднимается на один узел вверх).
источник