자바스크립트 : 마우스 이벤트 메서드 : mouseover VS mouseenter

자바스크립트 : 마우스 이벤트 메서드 : mouseover VS mouseenter

오늘은 자바스크립트의 마우스 이벤트 메서드 중 mouseover와 mouseenter의 차이에 대하여 알아보도록 하겠습니다.

---

mouseover VS mouseenter

mouseover와 mouseenter는 요소 위에 마우스 포인터를 위치했을 때 이벤트를 발생시키는 메서드입니다. 이 두 메서드의 차이는 무엇일까요?

window.addEventListener("mouseover",() => {})
window.addEventListener("mouseenter",() => {})

이벤트 버블링

두 메서드의 차이는 이벤트 버블링에 있습니다. 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다. 다음의 예제와 함께 자세히 살펴보도록 하겠습니다.

See the Pen mouseevent by mj0614k (@mj0614k) on CodePen.

위 예제의 분홍색 상자 위에 마우스를 올려보면, 마우스오버와 마우스엔터 이벤트가 동시에 발생합니다. 그러나, 이벤트가 발생되는 주황색 상자 안의 자식 요소인 분홍색 상자 위에 마우스를 올려보면 마우스오버 이벤트만 발생함을 알 수 있습니다. 즉, 마우스오버는 이벤트 버블링이 적용되는 이벤트 메서드입니다.

결론적으로, 마우스오버와 마우스엔터 이벤트 메서드의 차이점을 정리하면 다음과 같습니다.

MouseOver : 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 해당 자식요소의 영역까지 포함
MouseEnter : 지정된 태그 요소(혹은 자신)의 영역에만 해당되며, 만약 자식요소가 있다면 해당 자식요소의 영역은 제외