Какова цель различных свойств *Target?

Question

В классе MouseEvent есть несколько событий *Target:

• цель
• currentTarget
• relatedTarget

Какова их цель в контексте MouseEvent?

Answer 1

Эти свойства эквивалентны событиям мыши в JavaScript. События JavaScript проходят через DOM (называемый "всплывающий"). target это объект, на который изначально было отправлено событие. currentTarget это объект, к которому был прикреплен ваш обработчик событий.

пример

У вас есть эта структура HTML:

<ul id="list">
  <li>Entry 1</li>
  <li>Entry 2</li>
</ul>

и вы добавляете обработчик кликов к <ul> элемент (либо с помощью JavaScript или Dart, концепция та же).

Когда вы нажимаете "Entry 2", вызывается ваш обработчик кликов (потому что событие "всплывает" на нем). target будет <li> элемент, в то время как currentTarget будет <ul> элемент. Какой из них вы должны использовать, зависит от того, что вы хотите сделать в своем обработчике - например, вы можете скрыть "Entry 2", используя targetили весь список с помощью currentTarget,

Элемент, на который ссылается relatedTarget зависит от типа вашего MouseEvent - список можно найти здесь: event.relatedTarget. В приведенном выше примере это будет nullпотому что события клика не имеют никакой связанной цели.

Связанные ссылки MDN: event.currentTarget, event.target