Poznajemy target i relatedTarget dla mouse eventów, które już poznaliśmy. Kontynuacja lekcji poprzednich, do dzieła!
Ok, przypomnijmy:
- mouseenter: event, który jest odpalany, gdy mysz najedzie na element
- mouseleave: event, który jest odpalany, gdy mysz zjedzie z elementu
- mouseover: zakładamy, że słucha ul – event, który jest odpalany, gdy:
- mysz najedzie na element ul
- zjedzie z ul najeżdżając na li wewnątrz niego
- zjedzie z li najeżdżając na span wewnątrz niego
- zjedzie ze spanu najeżdżając na li wewnątrz niego
- zjedzie z li najeżdżając na kolejny li wewnątrz niego
- mouseout: obowiązuje ta sama zasada co w mouseover, ale na zjeżdżanie, czyli każde zjechanie z elementu, na który słuchamy bądź jego dzieci odpala event.
Ok, target i relatedTarget dla eventu mouseenter:
- target: ten element, na który wjechaliśmy
- relatedTarget: element, z którego zeszliśmy, odpalając mouseenter
Ok, target i relatedTarget dla eventu mouseleave:
- target: element, który opuściliśmy
- relatedTarget: element, na który teraz pokazujemy
Czyli w przypadku mouseenter i mouseleave:
- zarówno mousenter i mouseleave odpali się raz dla jednorazowego przejechania myszą po elemencie, na który słuchamy i co my tam wewnątrz robimy niczego nie zmienia
- target to zawsze będzie element, na którym słuchamy
- relatedTarget to będzie element, z którego przyszliśmy (dla mouseenter) albo element, na który opuściliśmy (dla mouseleave).
Mouseover: wyobraźmy sobie taką listę, po której przejedziemy myszą po wszystkich elementach:
<ul>
<li>Bla bla <span>span bla</span></li>
<li>Li 2</li>
</ul>Słuchamy na ul na event mouseover:
- Pierwszy mouseover:
- target: ul
- relatedTarget: null
- Drugi mouseover:
- target: li
- relatedTarget: ul
- Trzeci mouseover:
- target: span
- relatedTarget: li
- Czwarty mouseover:
- target: li
- relatedTarget: span
- Piąty mouseover:
- target: li (drugi)
- relatedTarget: li (pierwszy)
- Szósty mouseover:
- target: ul
- relatedTarget: li (drugi)
I tak to wygląda. Teraz mouseout:
- Pierwszy mouseout:
- target: ul (opuszczony)
- relatedTarget: li (odwiedzony)
- Drugi mouseout:
- target: li (opuszczony)
- relatedTarget: span (odwiedzony)
- Trzeci mouseout:
- target: span (opuszczony)
- relatedTarget: li (odwiedzony)
- Czwarty mouseout:
- target: li (opuszczony, pierwszy)
- relatedTarget: li (odwiedzony, drugi)
- Piąty mouseout:
- target: li (opuszczony)
- relatedTarget: ul (odwiedzony)
- Szósty mouseout:
- target: ul (opuszczony)
- relatedTarget: body (odwiedzony)
Musimy to po prostu zrozumieć, niezależnie od tego jak trudne się to na początku wydaje.
