mouseenter / movesover의 차이점

mouseenter / movesover

오늘은 mouseenter / movesover의 차이점에 대해 알아보는 시간을 가지도록 하겠습니다.

---

01. mouseenter / movesover 이벤트 메서드란?

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

02. mouseenter / movesover 차이점

두 이벤트를 유사하지만 이벤트 전파와 취소 가능성에 큰 차이가 있습니다.
mouseOver/mouseOut는 이벤트가 발생할 때 버블링이 일어나며 상위 요소로 전파됩니다. 그리고 preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있습니다. 한편 mouseEnter/mouseLeave는 이벤트가 발생할 때 버블링이 일어나지 않아 자기 자신만이 이벤트를 받을 수 있게 됩니다.
즉 target과 currentTarget이 항상 일치하게 됩니다. 또한 preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 없습니다.
아래 예제의 숫자변화를 통해 이해 해봅시다.

03. 예제