mouseover와 mouseenter 이벤트 차이

JavaScript/JS 활용 & etc..

jaiyah 2016. 9. 29. 13:03

mouseover vs mouseenter

이 포스팅에서는 마우스오버 이벤트와 마우스엔터 이벤트의 차이점에 대해 알아봅니다.

mouseover 와 mouseenter의 차이점은 이벤트 버블링에 있습니다.

다음의 소스뷰를 살펴보도록 합니다.

위의 영역의 오렌지와 핑크에 마우스를 올렸다 내렸다하면 마우스오버와 마우스엔터 이벤트를 발생시킬 것입니다.

mouseover 이벤트는 이벤트 버블링이 적용되는 이벤트이기 때문에 내부의 div 태그 안에 들어가도 이벤트를 또 다시 발생시킵니다.

반면에, mouseenter 이벤트는 문서 객체의 안에 있는지 외부에 있는지만 따지기 때문에 이벤트가 한 번만 발생하게 됩니다.

버블링에 대해 좀더 자세히 살펴보려면 아래의 참고 링크를 살펴보시기 바랍니다.

Jaehee's WebClub