Какова точная разница между свойством currentTarget и свойством target в JavaScript

290

Может кто-нибудь сказать мне точную разницу между currentTargetи targetсвойством в событиях Javascript с примером и какое свойство используется в каком сценарии?

Valli69
источник
Это важно, потому что некоторые браузеры имеют разные подходы, например, если вы слушаете событие div copy, в FF вы получите textNode вместо элемента, но слушатель будет на уровне div.
Никос

Ответы:

406

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

  • target это элемент, который вызвал событие (например, пользователь нажал на)
  • currentTarget это элемент, к которому прикреплен слушатель события.

Смотрите простое объяснение в этом блоге .

Грифон
источник
111
target = элемент, вызвавший событие; currentTarget = элемент, который слушает событие.
markmarijnissen
2
@markmarijnissen Вы обязательно должны оставить свой комментарий в качестве ответа, так как он более полезен, чем ответ выше, а также проголосовал больше!
Андреа
Можете ли вы обновить свой ответ за этот комментарий
Рахиль Вазир
думать о currentTarget как о «заданном
объекте
Это не всегда элемент. напр.XMLHttpRequest
Кну
77

target = элемент, который вызвал событие.

currentTarget = элемент, который имеет прослушиватель событий.

markmarijnissen
источник
3
Элементы запускают событие, но не слушают его. Мы просто назначаем обработчик для его выполнения, когда это происходит. currentTarget - тот, где обработчик события был присоединен.
Самяк Джайн
23

Минимальный исполняемый пример

window.onload = function() {
  var resultElem = document.getElementById('result')
  document.getElementById('1').addEventListener(
    'click',
    function(event) {
      resultElem.innerHTML += ('<div>target: ' + event.target.id + '</div>')
      resultElem.innerHTML += ('<div>currentTarget: ' + event.currentTarget.id + '</div>')
    },
    false
  )
  document.getElementById('2').dispatchEvent(
          new Event('click', { bubbles:true }))
}
<div id="1">1 click me
  <div id="2">2 click me as well</div>
</div>
<div id="result">
  <div>result:</div>
</div>

Если вы нажмете на:

2 click me as well

затем 1слушает его и добавляет к результату:

target: 2
currentTarget: 1

потому что в этом случае:

  • 2 это элемент, который породил событие
  • 1 это элемент, который слушал событие

Если вы нажмете на:

1 click me

вместо этого результат:

target: 1
currentTarget: 1

Испытано на хроме 71.

Сиро Сантилли 郝海东 冠状 病 六四 事件 法轮功
источник
18

Если это не прилипает, попробуйте это:

ток в currentTargetотносится к настоящему. Это самая последняя цель, которая поймала событие, которое вспыхнуло откуда-то еще.

user1164937
источник
5

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

Если щелкнуть тег P в приведенном выше коде, вы получите три предупреждения, а если щелкнуть тег div, вы получите два предупреждения и одно предупреждение при нажатии на тег формы. А теперь посмотрите следующий код,

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>
<script>
function fun(event){
  alert(event.target+" "+event.currentTarget);
}

</script>

<form>FORM
  <div onclick="fun(event)">DIV
    <p>P</p>
  </div>
</form>
Мы только что удалили onclick из тега P и формы, и теперь, когда мы щелкаем по тегу P, мы получаем только одно предупреждение:

[объект HTMLParagraphElement] [объект HTMLDivElement]

Здесь event.target - это [объект HTMLParagraphElement], а event.curentTarget - это [объект HTMLDivElement]:

event.target является узлом , из которого возникло событие, и event.currentTarget, напротив, относится к узлу , на котором ток-событие слушателя был attached.To узнать больше см барботирования

Здесь мы нажали на тег P, но у нас есть не слушатель на P, а его родительский элемент div.

Сомеш Шарма
источник
3

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

Напротив , event.currentTarget ссылается на узел, к которому был подключен прослушиватель текущего события. То есть. если мы прикрепили наш прослушиватель событий к узлу абзаца, то event.currentTarget ссылается на абзац, а event.target по-прежнему ссылается на span. Обратите внимание: если у нас также есть прослушиватель событий в теле, то для этого прослушивателя событий event.currentTarget ссылается на тело (т. Е. Событие, предоставляемое в качестве входных данных для списков событий, обновляется каждый раз, когда событие поднимается на один узел вверх).

YogeshBagdawat
источник
Для тех, кто посещает эту страницу, этот ответ неверен! Проверьте принятый ответ! Эта вещь должна быть забыта. DelegateTarget - это узел, который указывает на то, куда было прикреплено событие.
LittleTreeX