[JavaScript] mouseenter와 mouseover의 차이점 알아보기

mouseenter와 mouseover 메서드의 차이는?

이번 포스팅에서는 mouseenter와 mouseover 메서드의 차이에 대해 다뤄보도록 하겠습니다.

---

mouseenter, mouseover 이벤트란 무엇인가!?

mouseenter와 mouseover는 어떤 요소 안으로 마우스 커서가 들어오는 순간을 감지하는 이벤트이며, 이와 반대로 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 이벤트는 mouseout, mouseleave다.

mouseenter <-> mouseleave
mouseover <-> mouseleave

그래서 둘이 뭐가 다른데!?🤔

mouseenter <-> mouseleave의 경우는 이벤트 발생 시 버블링이 일어나지 않으며 자신만이 이벤트를 받을 수 있다. 반면, mouseover <-> mouseleave의 경우는 이벤트가 발생 시 버블링이 일어나며 상위 요소로 전파, preventDefault 메서드를 호출해 이벤트의 기본 동작을 취소할 수 있다.

읽어보면 좋은 글들

MDN - mouseover / mouseenter
즐거움을 찾자 Find Fun!!:티스토리 - jQuery API - mouseenter(), 마우스 진입 감지 이벤트
Velog 너구리오리의 잡다한 지식 - MouseOver와 MouseEnter의 차이, 이벤트 버블링

코드펜 예제로 비교해보자!

백문이 불여일견이라고 직접 코드펜 예제로 봐야 이해가 겨우 갈 것이다.
아래의 코드펜 예제를 통해 숫자가 증가되는 순간을 자세히 살펴보도록 할 것.

출처 : https://findfun.tistory.com/290

결론

mouseover : 지정된 태그 요소 또는 자신 및 자식 요소까지 포함 함.
mouseenter : 지정된 태그 요소 또는 자신의 영역만 포함하며, 자식 요소는 있어도 제외 함.