Was ist der Zweck der verschiedenen * Zieleigenschaften?

Question

In der Mouseevent-Klasse gibt es mehrere * Ziel Ereignisse:

• target
• currentTarget
• relatedTarget

Was ist ihr Zweck im Rahmen eines Mouseevent?

Answer 1

Diese Eigenschaften entsprechen den JavaScript-Mausereignissen. JavaScript-Ereignisse durchlaufen das DOM ("bubbling" genannt). target ist das Objekt, auf dem das Ereignis ursprünglich ausgelöst wurde. currentTarget ist das Objekt, an das Ihr Ereignishandler angehängt wurde.

Beispiel

Sie haben diese HTML-Struktur:

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

und einen Klick-Handler zum <ul> Elemente hinzufügen (entweder über JavaScript oder Dart, das Konzept ist das gleiche).

Wenn Sie dann auf "Eintrag 2" klicken, wird Ihr Klick-Handler aufgerufen (weil das Ereignis "aufbläht"). target wird das <li> Element sein, während currentTarget das <ul> Element sein wird. Welche Sie verwenden müssen, hängt davon ab, was Sie in Ihrem Handler tun möchten - zum Beispiel können Sie "Eintrag 2" selbst unter Verwendung von target oder die gesamte Liste unter Verwendung von currentTarget verbergen.

Das von relatedTarget referenzierte Element hängt vom Typ Ihres MouseEvent ab - eine Liste finden Sie hier: event.relatedTarget. Im obigen Beispiel wäre dies null, da Klickereignisse kein verwandtes Ziel haben.

Verwandte MDN Links: event.currentTarget, event.target