mouseenter | movesover 의 차이점

mouseenter | movesover 의 차이점

mouseOver or mouseOut : 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 해당 자식요소의 영역까지 포함됩니다.
mouseEnter or mouseLeave : 지정된 태그 요소(혹은 자신)의 영역에만 해당되며, 만약 자식요소가 있다면 해당 자식요소의 영역은 제외됩니다.

이를 더 쉽게 표현하기 위해 코드펜으로 예시를 가져와 보았습니다.

01. mouseover | mouseout 이벤트

1번의 경우는 마우스를 우선 회보라색 div 범위내에 올리면 p 태그로 감싸여 있는 글씨 부분의 배경이 보라색으로 변하는걸 확인하실 수 있습니다.
그리고 다시 보라색 영역인 p 태그 영역으로 마우스를 가져다 놓으면 최종적으로 파란색 선이 생기는걸 확인하실 수 있습니다.
결론은 회보라색 div 영역에만 마우스 이벤트가 발생 된다는것을 확인할 수 있습니다.

02. mouseenter | mouseleave 이벤트

2번의 경우는 우선 마우스를 올리면 글씨 부분의 배경이 바뀌는게 1번과 똑같습니다. 그러나 글씨 부분까지 마우스가 들어가도 변하지 않습니다.
2번의 div를 완전히 빠져나와야 마우스가 나갔을 때의 이벤트가 실행됩니다. 결론은 p 태그까지도 영향을 끼친다는 것을 확인할 수 있습니다.

결론 : 자식요소까지 영역을 넓히려면 mouseenter/mouseleave 이(가) 아닌, mouseover/mouseout 를 사용해야 한다는 것을 알 수 있습니다.