JavaScript MouseOver | MouseEnter

MouseOver, MouseEnter

MouseOver, MouseEnter의 차이를 알아봅시다.

---

MouseOver, MouseEnter에 대해서

mouseOver와 mouseEnter는 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 마우스 이벤트이며,
이와 반대로 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 마우스 이벤트는 mouseOut과 mouseLeave입니다.

주로 아래와 같이 짝을 이루어 사용합니다.
mouseOver <-> mouseOut
mouseEnter <-> mouseLeave

mouseover

mouseover는 지정된 요소에 (자기 자신)을 포함하면서, 밑에 자식요소가 존재한다면 자식영역까지 포함됩니다.

mouseenter

mouseenter는 지정된 요소(자기 자신)만 해당되며, 밑에 자식요소가 존재한다면 자식영역은 제외됩니다.

MouseOver, MouseEnter 차이

mouseOver/mouseOut는 이벤트가 발생할 때 버블링이 일어나며 상위 요소로 전파됩니다. 그리고 preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있습니다.
mouseEnter/mouseLeave는 이벤트가 발생할 때 버블링이 일어나지 않아 자기 자신만이 이벤트를 받을 수 있게 됩니다. target과 currentTarget이 항상 일치합니다. preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 없습니다.

예제

See the Pen MouseOver vs. MouseEnter by KwonWonpyo (@kwonwonpyo) on CodePen.