mouseEnter / mouseOver 차이점

📎 mouseEnter와 mouseOver의 차이점에 대해 알아봅시다.

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

➰짝꿍
mouseOver ⎯ mouseOut
mouseEnter ⎯ mouseLeave

---

📎 mouseOver와 mouseEnter 차이

이벤트 버블링 : 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상

➰ mouseOver/mouseOut는 이벤트가 발생할 때 버블링이 일어나며 상위 요소로 전파됩니다.
∙ preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있습니다.

➰ mouseEnter/mouseLeave는 이벤트가 발생할 때 버블링이 일어나지 않아 자기 자신만이 이벤트를 받습니다. 즉, target과 currentTarget이 항상 일치합니다.
∙ preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 없습니다.

---

📎 mouseOver와 mouseEnter 예시