mouse event

⌚️ 1. mouseover, mouseout

이름에서도 볼 수 있듯이, mouseover event는 타겟에 마우스 포인터가 올라갈 때, 그리고 mouseout은 타겟에 마우스 포인터가 떠날 때 일어난다.

이때 이벤트 객체에는 1. target, 2. relatedTarget 이렇게 두가지가 존재한다.
target은 말그대로 마우스 이벤트 대상인데, relatedTarget은 마우스 타겟에 이동하기 직전의 대상이다.
브라우저는 성능이 좋아서, 중간에 있는 모든 대상들을 RelatedTarget으로 잡지 않고, 포인터가 아주 빠르게 움직였을 경우는 생략한다.

또한, 브라우저 바깥에서부터 안으로 순식간에 들어왔을 경우, 이때의 realtedTarget은 null이다.

mouseout 이벤트의 경우 주의할 점은, 한 이벤트에 단 하나의 타겟만 가질 수 있기 때문에 z-index를 기준으로 이벤트를 감지한다.
즉, 예를들어

이벤트의 부모로부터 내부의 작은 자식으로 이동할 경우, parent에는 mouseout 이벤트가 발생한다.

📱비슷한 이벤트, mouseenter, mouseleave

위의 mouseover, mouseout와 비슷하지만 특징이 있다면
1. 버블링이 되지 않는다.
2. 레이아웃개념이 적용되지 않는다(즉, 자식은 이벤트가 발생하지 않음)

두번째가 무슨 의미이냐면, 만약 부모와 동일하게 자식 역시 mouseenter, mouseleave 이벤트가 존재할 경우, 자식까지 전파되지 않고 부모에서 해당 이벤트가 처리되고 끝난다.
즉, 부모에게만 유일하게 마우스 이벤트를 처리하고 싶을 때에 쓰면 된다.

📱요약

1. fast mouse move는 어떤 이벤트든지 간에 해당 요소들은 무시한다
2. 둘 다 relatedTarget이라는 프로퍼티가 존재하며, 이 프로퍼티 덕택에 어디에서부터 마우스가 움직였는지 알 수 있다.
3. mouseenter/mouseleave 이벤트는 같은 이벤트가 걸린 자식이 있을 시 부모인 외곽만 이벤트가 발생한다.