mouseenter / mouseover

mouseenter, mouseover

이번 시간에는 mouseenter와 mouseover의 차이점을 알아보도록 하겠습니다.

---

mouseenter, mouseover란?

mouseenter와 mouseover는 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 마우스 이벤트이며,
mouseenter는 mouseleave와 짝을 이루고, mouseover는 mouseout과 짝을 이룬다.

mouseenter, mouseover의 차이점

해당 두 이벤트를 비슷하지만 이벤트 전파와 취소 가능성에 큰 차이가 있다.
mouseenter는 이벤트가 발생 시 버블링이 일어나지 않아 자기 자신만이 이벤트르 받을 수 있고,
mouseover는 이벤트가 발생할 때 버블링이 일어나며 상위 요소로 전파된다.

mouseover/out : 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 해당 자식 요소의 영역까지 포함시킨다.
mouseenter/leave : 지정된 태그 요소(혹은 자신)의 영역에만 해당되며, 만약 자식 요소가 있다면 해당 자식요소의 영역은 제외시킨다.

See the Pen mouseenter/over by KDB6 (@kdb6) on CodePen.