mouseover / mouseenter

mouseover / mouseenter

자바스크립트의 이벤트 중 마우스와 관련된 요소 입니다. 이 두가지의 요소들은 비슷하지만 서로 다른 차이점이 존재합니다. 이번에는 그 차이점에 대해 알아 보도록 합시다👀

---

mouseOver / mouseOut
mouseEnter / mouseLeave

두 이벤트 모두 다 마우스가 요소안으로 들어오는 순간을 감지하는 이벤트이며, 반대는 마우스가 요소 밖으로 나가는 순간을 감지하는 이벤트 입니다.
두 이벤트가 유사 하지만, 이벤트 전파와 취소가능성에 큰 차이가 있습니다.

mouseOver

mouseOver / mouseOut 는 이벤트가 발생할 때 버블링이 일어나며 상위요소로 전파됩니다.
preventDefault를 이용하여 취소 할 수 있습니다.

➡️mouseOver는 지정된 요소에 자기 자신을 포함하면서 밑에 자식요소가 있다면 해당 자식영역까지 포함됩니다.

mouseEnter

mouseEnter / mouseLeave 는 이벤트가 발생할 때 버블링이 일어나지 않아 자기자신만 이벤트를 받게 됩니다.
그렇기 때문에 target과 currentTarget이 일치하게 됩니다. preventDefault를 이용하여 이벤트를 취소 할 수 없습니다.

➡️mouseEnter는 지정된 요소(자기 자신)만 해당되며, 그 밑에 자식요소가 존재한다면 자식영역은 제외가 됩니다.

차이 비교하기

결과

결과에서도와 같이 mouseover의 위치값과 mouseenter의 위치값이 서로 다른것을 알 수 있습니다. 마우스 효과를 자식 영역까지 확대해서 사용하고 싶다면 mouseover/out를 자기 자신에 해당하는 요소만 사용하고 싶으면 mouseenter/mouseleave를 사용하시면 된답니다.