mouseenter / mouseover 의 차이

mouseenter / mouseover 의 차이

>

mouseenter / mouseover

mouseenter / mouseover는 모두 어떤 영역에 마우스가 올라감을 감지하는 메서드입니다. 이 둘의 차이점을 알아봅시다.

mouseover와 mouseout

mouseover 메서드는 마우스 커서가 지정 영역 안으로 들어왔을 때 이벤트가 발생하는 메서드 입니다.
mouseout 메서드는 마우스 커서가 지정 영역 안에서 바깥으로 나갔을 때 이벤트가 발생하는 메서드 입니다.
이 둘은 서로 짝을 이루는 메서드입니다.

mouseover와 mouseout

mouseenter와 메서드는 마우스 커서가 지정 영역 안으로 들어왔을 때 이벤트가 발생하는 메서드 입니다.
mouseleave 메서드는 마우스 커서가 지정 영역 안에서 바깥으로 나갔을 때 이벤트가 발생하는 메서드 입니다.
이 둘은 서로 짝을 이루는 메서드입니다.

mouseover와 mouseenter의 차이점

마우스오버(아웃)은 이벤트를 설정한 부모요소의 자식요소에게 이벤트를 설정하지 않아도 포인터를 감지하면 이벤트가 발생합니다. 즉 mouseover 메서드는 이벤트 버블링이 적용되는 메서드이기 때문에 부모 요소의 이벤트가 자식 요소에게도 실행 되는 것입니다. 이벤트 버블링이란? : 하위요소의 이벤트를 상위요소가 제어하는 하는 것 반면에, mouseenter 메서드는 해당 요소 안에 있는지 외부에 있는지만 따지기 때문에 이벤트가 한 번만 발생하게 됩니다. 즉 자식 요소에게 부모 요소의 이벤트가 발생하지 않으며 오로지 해당 영역에 마우스 포인터가 들어와야 이벤트가 발생하므로 포인터가 외부로 나갔다가 들어왔을 때 이벤트가 한 번만 실행되는 것입니다. 또한 mouseenter는 Explorer전용 이벤트로 브라우저를 고려하지 않아도 작동이 된다는 차이점이 있습니다.

addEventListener("mouseenter")	addEventListener("mouseover")
해당 영역의 자식 영역 감지하지 않습니다	해당 영역의 자식 영역 감지합니다.