[자바스크립트]마우스 오버 메서드 _ mouseenter 와 mouseover메서드의 차이점을 알아보자

mouseenter와 mouseover

자바스크립트의 마우스이벤트에는 여러 종류가 있습니다. 그 중에서도 'mouseenter'와 'mouseover'는 같은 듯하면서 살짝 다른데요. 오늘은 이 둘의 차이점에 대해 알아보는 시간을 가져보겠습니다.

마우스 커서가 요소로 들어갈 때와 나갈때 발생합니다.

마우스 커서가 요소로 들어갈 때와 나갈때 발생합니다. 버블링이 적용됩니다.

■ 둘의 차이점?

mouseover 이벤트는 내부 div태그 안에 들어가도 이벤트를 또 발생시킵니다.
반면, mouseenter는 문서 객체의 안에 있는지 외부에 있는지만 따지기 때문에 이벤트가 한 번만 발생합니다.

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단에 도달할때까지 이 과정이 반복되며 그로 인해 요소 각각에 할당된 핸들러가 동작하는 것을 뜻합니다.

예를 들어 부모 요소와 자식 요소 둘 다 click이벤트를 생성한 후 자식 요소를 click해서 이벤트를 호출한다고 하면 클릭하지도 않은 부모 요소의 click이벤트까지 발생하게 됩니다. 이게 바로 버블링이라고 표현할 수 있겠습니다.

아래 코드펜을 보시면 부모 요소인 outer에만 마우스 메서드를 주었는데요. mouseover는 outer의 자식요소인 inner에 마우스를 오버해도 출력이 되는 반면 enter는 지정해준 요소에만 마우스오버시 출력되는 모습을 확인할 수 있습니다.

728x90