이름에서도 볼 수 있듯이, mouseover event는 타겟에 마우스 포인터가 올라갈 때, 그리고 mouseout은 타겟에 마우스 포인터가 떠날 때 일어난다.
이때 이벤트 객체에는 1. target, 2. relatedTarget 이렇게 두가지가 존재한다.
target은 말그대로 마우스 이벤트 대상인데, relatedTarget은 마우스 타겟에 이동하기 직전의 대상이다.
브라우저는 성능이 좋아서, 중간에 있는 모든 대상들을 RelatedTarget으로 잡지 않고, 포인터가 아주 빠르게 움직였을 경우는 생략한다.
또한, 브라우저 바깥에서부터 안으로 순식간에 들어왔을 경우, 이때의 realtedTarget은 null이다.
mouseout 이벤트의 경우 주의할 점은, 한 이벤트에 단 하나의 타겟만 가질 수 있기 때문에 z-index를 기준으로 이벤트를 감지한다.
즉, 예를들어
이벤트의 부모로부터 내부의 작은 자식으로 이동할 경우, parent에는 mouseout 이벤트가 발생한다.
위의 mouseover, mouseout와 비슷하지만 특징이 있다면
1. 버블링이 되지 않는다.
2. 레이아웃개념이 적용되지 않는다(즉, 자식은 이벤트가 발생하지 않음)
두번째가 무슨 의미이냐면, 만약 부모와 동일하게 자식 역시 mouseenter, mouseleave 이벤트가 존재할 경우, 자식까지 전파되지 않고 부모에서 해당 이벤트가 처리되고 끝난다.
즉, 부모에게만 유일하게 마우스 이벤트를 처리하고 싶을 때에 쓰면 된다.