Jaki jest cel różnych * właściwości celu?

Question

W klasie MouseEvent istnieje wiele * imprezy docelowe:

• target
• currentTarget
• relatedTarget

Jaki jest ich cel w kontekście MouseEvent?

Answer 1

Te właściwości są równoważne zdarzeniom myszy JavaScript. Zdarzenia JavaScript przechodzą przez DOM (zwane "bulgotaniem"). target to obiekt, na którym wydarzenie zostało pierwotnie wysłane. currentTarget to obiekt, do którego dołączono obsługę zdarzeń.

Przykład

Trzeba tę strukturę HTML:

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

i dodaniu obsługi kliknij na element <ul> (za pośrednictwem JavaScript lub Dart, koncepcja jest taka sama).

Po kliknięciu "Wpis 2" zostanie wywołana funkcja obsługi kliknięcia (ponieważ zdarzenie "pęcznieje" do niej). target będzie elementem <li>, a currentTarget będzie elementem <ul>. To, którego musisz użyć, zależy od tego, co chcesz zrobić w programie obsługi - na przykład możesz ukryć "Wpis 2" samodzielnie, używając target, lub całej listy za pomocą currentTarget.

Element, do którego odnosi się relatedTarget, zależy od rodzaju myszy MouseEvent - listę można znaleźć tutaj: event.relatedTarget. W powyższym przykładzie byłby to null, ponieważ zdarzenia kliknięcia nie mają powiązanego celu.

Powiązane MDN linki: event.currentTarget, event.target