mouseover/out
과 mouseenter/leave
는 마우스 커서가 요소로 들어갈 때와 나갈 때 발생하는 이벤트다.
두 이벤트는 유사하지만 이벤트 전파와 취소 가능성에 큰 차이가 있다. 이 차이점은 element가 부모, 자식 요소로 겹쳐 있을 때 발생한다.
mouseover/out
이벤트는 발생할 때 버블링이 일어나며 상위 요소로 전파된다.
그리고 preventDefault()
메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있다.
그러나 mouseenter/leave
이벤트는 발생할 때 버블링이 일어나지 않아 항상 자기 자신만이 이벤트를 받을 수가 있다. (즉, target과 currentTarget이 항상 일치한다.) 또한, preventDefault()
메서드를 호출하여 이벤트의 기본 동작을 취소할 수 없다.