[JAVASCRIPT] mouseover와 mouseenter의 이벤트 차이점

자바스크립트 : Mouse Event Method

이번 시간에는 마우스 이벤트 메서드 중 mouseover와 mouseenter의 차이점에 대해 알아보겠습니다 ~ 😁

---

#1. mouseover와 mouseout 메서드 📖

• mouseover 메서드는 마우스 커서가 지정 영역 안으로 들어왔을 때 이벤트가 발생하는 메서드 입니다.
• mouseout 메서드는 마우스 커서가 지정 영역 안에서 바깥으로 나갔을 때 이벤트가 발생하는 메서드 입니다.

💡 이처럼 mouseover 메서드는 mouseout 메서드와 짝을 이루기 때문에 꼭 함께 사용해주어야 합니다!

---

#2. mouseenter와 mouseleave 메서드 📖

mouseenter와 메서드는 마우스 커서가 지정 영역 안으로 들어왔을 때 이벤트가 발생하는 메서드 입니다.
mouseleave 메서드는 마우스 커서가 지정 영역 안에서 바깥으로 나갔을 때 이벤트가 발생하는 메서드 입니다.

💡 마찬가지로 mouseenter와 메서드는 mouseleave 메서드와 짝을 이루기 때문에 꼭 함께 사용해주어야 합니다!

---

#3. mouseover와 mouseenter의 차이점은 무엇인가요? 🧐

mouseover 메서드와 mouseenter메서드는 얼핏보면 똑같아 보이지만 실제 메서드를 적용했을 때 그 차이점을 뚜렷하게 확인할 수 있습니다.

마우스오버(아웃)은 이벤트를 설정한 부모요소의 자식요소에게 이벤트를 설정하지 않아도 포인터를 감지하면 이벤트가 발생합니다.
즉 mouseover 메서드는 이벤트 버블링이 적용되는 메서드이기 때문에 부모 요소의 이벤트가 자식 요소에게도 실행 되는 것입니다.

💡 이벤트 버블링 : 하위요소의 이벤트를 상위요소가 제어하는 하는 것

반면에, mouseenter 메서드는 해당 요소 안에 있는지 외부에 있는지만 따지기 때문에 이벤트가 한 번만 발생하게 됩니다.
즉 자식 요소에게 부모 요소의 이벤트가 발생하지 않으며 오로지 해당 영역에 마우스 포인터가 들어와야 이벤트가 발생하므로 포인터가 외부로 나갔다가 들어왔을 때 이벤트가 한 번만 실행되는 것입니다.
또한 mouseenter는 Explorer전용 이벤트로 브라우저를 고려하지 않아도 작동이 된다는 차이점이 있습니다.

✏️ 예제 01

✏️ 예제 02

😇 이처럼 마우스오버와 엔터의 차이는 이벤트 버블링이 발생하냐 안하냐에 따른 차이점이 있다고 정리하면 될 것 같습니다!