Qual è lo scopo delle diverse proprietà * Target?

Question

Nella classe MouseEvent ci sono più eventi * Target:

• target
• currentTarget
• relatedTarget

Qual è il loro scopo nel contesto di un MouseEvent?

Answer 1

Queste proprietà sono equivalenti agli eventi del mouse JavaScript. Gli eventi JavaScript attraversano il DOM (chiamato "bubbling"). target è l'oggetto su cui è stato originariamente inviato l'evento. currentTarget è l'oggetto su cui è stato collegato il gestore eventi.

Esempio

avete questa struttura HTML:

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

e si aggiunge un gestore di clic per l'elemento <ul> (tramite JavaScript o Dart, il concetto è lo stesso).

Quando si fa clic su "Voce 2", verrà chiamato il gestore di clic (perché l'evento "bolle su" ad esso). target sarà l'elemento <li>, mentre currentTarget sarà l'elemento <ul>. Quale si deve usare dipende da cosa si vuole fare nel gestore: ad esempio, è possibile nascondere "Entry 2" stesso utilizzando target o l'intero elenco utilizzando currentTarget.

L'elemento di riferimento di relatedTarget dipende dal tipo di mouseEvent: un elenco può essere trovato qui: event.relatedTarget. Nell'esempio sopra, sarebbe null, perché gli eventi di clic non hanno alcuna destinazione correlata.

link MDN correlati: event.currentTarget, event.target