mouseenter / mouseover 차이

]

mouseenter / mouseover 차이

mouseenter

✔JS 에서는 Explorer전용 이벤트이나 jQuery 에서는 브라우져를 고려하지 않고 작동이 되도록 구성요소에 마우스 포인터가 진입하면 발생오로지 자기 자신에게 마우스 포인터가 와야만 발생 합니다.

mouseover

✔직접 이벤트를 걸지 않은 자식요소에 마우스 포인터가 와도 발생합니다.

주로 아래와 같이 짝을 이루어 사용한다.
mouseOver <-> mouseOut
mouseEnter <-> mouseLeave

MouseOver와 MouseEnter 차이

두 이벤트를 유사하지만 이벤트 전파(event propagation)와 취소 가능성(cancelable)에 큰 차이가 있다.

mouseOver/mouseOut는 이벤트가 발생할 때 버블링이 일어나며 상위 요소로 전파된다. 그리고 preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있다.

한편 mouseEnter/mouseLeave는 이벤트가 발생할 때 버블링이 일어나지 않아 자기 자신만이 이벤트를 받을 수 있게 된다. 즉 target과 currentTarget이 항상 일치한다. 또한 preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 없다.

결과